<template>
  <div>
    <el-dialog :visible="$store.state.orderFollow.orderFollowVisible"
               width="57%"
               style="margin-left: 10%;"
               @open="handleOpen" @submit.native.prevent="enterSubmit" @close="handleClose">

      <template #title>
            <span style="font-size:14px">
              {{ dialogTitle }}
            </span>
      </template>

      <!-- 内容容器添加滚动 -->
      <div>
        <!-- 原有内容 -->
        <div style="display: flex;align-items: center; ">
          <div
            style="flex-grow: 1; display: flex; justify-content: start; align-items: center; margin-left:4px; margin-right: 40px">
            <el-tag
              v-if="orderDetail.doudianOrderShopName != null && orderDetail.doudianOrderShopName != ''  && orderDetail.doudianOrderShopName != undefined "
              size="mini" style="margin: 1px;">
              {{ orderDetail.doudianOrderShopName }}
            </el-tag>
            <el-tag
              :title="label.node"
              style="margin: 1px;cursor:pointer"
              v-for="label in orderDetail.labels"
              :key="label.name"
              size="mini">
              {{ label.name }}
            </el-tag>

            <el-tag v-show="orderDetail.maintainManageName" size="mini" style="margin: 1px;">
              {{ maintainManageName() }}
            </el-tag>
          </div>

          <div v-show="maintainManage_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="maintainManageClick()">
              认领维系
            </el-button>
          </div>

          <div v-show="auth_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="authClick()">实名完成</el-button>
          </div>

          <div v-show="baoZhang_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="baoZhangClick()">添加报账</el-button>
          </div>

          <div v-show="loser_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="loserClick()">交易失败</el-button>
          </div>

          <div v-show="activation_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="activationClick()">打标激活</el-button>
          </div>

          <div v-show="authBack_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="authBackClick()">回退实名</el-button>
          </div>

          <div v-show="addGenJin_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="addGenJinClick()">添加跟进</el-button>
          </div>

          <div v-show="recall_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="recallVisible=true">调回处理</el-button>
          </div>


          <div v-show="cancellation_isShowButton" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="cancellationClick()">订单作废</el-button>
          </div>


          <div v-show="orderDetail.state == 4" style="margin-left: 1px">
            <el-button size="mini" type="primary" @click="dealVisible=true">交易成功</el-button>
          </div>

          <div v-show="decryptUserInfo()" style="margin-left: 1px">
            <el-button size="mini" type="warning" @click="handDecrypt()">手动解密</el-button>
          </div>

          <div v-show="orderDetail.doudianOrderStatus == 10 && orderDetail.shopId == 104110047"
               style="margin-left: 1px">
            <el-button size="mini" type="success" @click="auditSuccess()">审核成功</el-button>
          </div>

          <div v-show="orderDetail.doudianOrderStatus == 10 && orderDetail.shopId == 104110047"
               style="margin-left: 1px">
            <el-button size="mini" type="danger" @click="auditFail()">审核失败</el-button>
          </div>

          <div style="margin-left: 1px" v-show="orderDetail.state == 2 && orderDetail.receiveOrderUserId">
            <el-button size="mini" type="success" @click="preTakeOrder()">揽收订单</el-button>
          </div>
          <div style="margin-left: 1px" v-if="orderDetail.ksOrder">
            <el-button size="mini" type="primary" @click="goKsOrderDetail()">工单详情</el-button>
          </div>
          <div style="margin-left: 1px"
               v-if="(orderDetail.state == 4 || orderDetail.state == 5 || orderDetail.state == 6) && !orderDetail.ksOrder ">
            <el-button size="mini" type="danger" @click="preAddKsOrder()">添加工单</el-button>
          </div>
        </div>
        <div v-if="orderDetail.type == 5 || orderDetail.type == 6" style="margin-bottom: 20px">
          <el-table :data="[computedOrderDetail]" border :resizable="false" fit="fit">
            <el-table-column width="140px" :resizable="false"
                             prop="telNumber"
                             label="订单号码/号码选择">
              <template #default="{row}">
                <div class="copy-cell">
                  {{ row.telNumber }}
                  <el-tag style="cursor: pointer"
                          v-if="(row.telNumber !== null && row.telNumber !== undefined && row.telNumber !== '') && row.isActivation == 1"
                          size="mini" @click="telNumberChange(false)" type="success">修改号码
                  </el-tag>
                  <el-tag style="cursor: pointer"
                          v-else-if="(row.telNumber == null || row.telNumber == undefined || row.telNumber == '') && row.isActivation == 1"
                          size="mini" @click="telNumberChange(true)" type="success">选择号码
                  </el-tag>
                  <div>{{ filterSpecListLast2 }}</div>
                  <i v-if="row.telNumber" v-hover-show class="el-icon-document-copy copy-icon"
                     @click.stop="copyText(row.telNumber)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-for="item in filterSpecList" :key="item.value" width="210px" :resizable="false"
                             prop="haoMaGuiGeStr"
                             :label="item.name">
              <template #default="{row}">
                <div class="copy-cell">
                  <span> {{ item.value }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(item.value)"/>
                </div>
              </template>
            </el-table-column>

            <el-table-column width="180px"
                             prop="doudianOrderManageAuthorName" :resizable="false"
                             label="带货达人">
              <template #default="{row}">
                <div class="copy-cell">
                  <span v-html="row.doudianOrderManageAuthorName"></span>
                  <i v-hover-show class="el-icon-document-copy copy-icon"
                     @click.stop="copyText(row.doudianOrderManageAuthorName)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="supplierName"
              label="号码仓" width="210px" :resizable="false">
              <template #header>
                号码仓
              </template>
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.supplierName }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.supplierName)"/>
                  <i v-if="row.supplierName" class="el-icon-view other-icon" @click="getSupplierNameVisible(row)"/>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-table :data="[computedOrderDetail]" border>
            <!-- 证件姓名列 -->
            <el-table-column prop="customName" width="140px" label="证件姓名" :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.customName }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customName)"/>
                </div>
              </template>
            </el-table-column>

            <!-- 证件号码列 -->
            <el-table-column prop="customNumber" width="210px" :resizable="false">
              <template #header>
                <span>证件号码</span>
                <el-tag type="success" plain size="mini" style="margin-left: 8px">
                  {{ orderDetail.customNumberAge }}
                </el-tag>
              </template>
              <template #default="{ row }">
                <div class="copy-cell">
                  <span>{{ row.customNumber }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customNumber)"/>
                  <i v-if="row.customNumber" class="el-icon-view other-icon" @click="getIdentityVisible(row)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="customTel"
              label="联系电话" width="210px" :resizable="false">
              <template #header>
                联系电话
              </template>
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.customTel }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customTel)"/>
                  <i v-if="row.customTel" class="el-icon-view other-icon" @click="getPhoneVisible(row)"/>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="shouHuoDiZhi" width="180px"
              label="收货地址"
              :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <el-tooltip
                    :content="row.shouHuoDiZhi"
                    placement="top"
                    :disabled="row.shouHuoDiZhi && row.shouHuoDiZhi.length <= 10">
                    <span>
                      {{
                        row.shouHuoDiZhi && row.shouHuoDiZhi.length > 10 ? row.shouHuoDiZhi.slice(0, 10) + '...' : row.shouHuoDiZhi
                      }}
                    </span>
                  </el-tooltip>
                  <i
                    v-hover-show
                    class="el-icon-document-copy copy-icon"
                    @click.stop="copyText(row.shouHuoDiZhi)"/>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="shouHuoDiZhi"
              label="买家留言"
              :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <el-tooltip :content="row.doudianOrderBuyerWords" placement="top"
                              :disabled="row.doudianOrderBuyerWords && row.doudianOrderBuyerWords.length <= 10">
                    <span>
                      {{
                        row.doudianOrderBuyerWords && row.doudianOrderBuyerWords.length > 10 ? row.doudianOrderBuyerWords.slice(0, 10) + '...' : row.doudianOrderBuyerWords
                      }}
                    </span>
                  </el-tooltip>
                  <i v-hover-show class="el-icon-document-copy copy-icon"
                     @click.stop="copyText(row.doudianOrderBuyerWords)"/>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-if="orderDetail.type != 5 && orderDetail.type != 6" style="margin-bottom: 20px">
          <el-table :data="[computedOrderDetail]" border>
            <el-table-column width="140px"
                             prop="telNumber" :resizable="false"
                             label="订单号码/号码选择">
              <template #default="{row}">
                <div class="copy-cell">
                  <span v-html="filterSpecListLast"></span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.telNumber)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="tel"
              label="联系电话" :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.tel }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.tel)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="联系姓名" :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.address }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.address)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="号码仓" align="center" prop="supplierName" :resizable="false">

              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.supplierName }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row)"/>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="address"
              label="详细地址" :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.address }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.address)"/>
                </div>
              </template>
            </el-table-column>

          </el-table>


          <el-table :data="[computedOrderDetail]" border>
            <el-table-column width="140px"
                             prop="customTel"
                             label="联系电话" :resizable="false">
              <template #header>
                联系电话
              </template>

              <template #default="{row}">
                <div class="copy-cell">
                  {{ row.customTel }}
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customTel)"/>
                  <i v-if="row.customTel" class="el-icon-view"
                     style="margin-left: 20px; cursor: pointer; color: #409EFF"
                     @click="getPhoneVisible(row)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="customName" width="130" label="证件姓名" :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.customName }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customName)"/>
                </div>
              </template>
            </el-table-column>

            <!-- 证件号码列 -->
            <el-table-column prop="customNumber" :resizable="false">
              <template #header>
                <span>证件号码</span>
                <el-tag type="success" plain size="mini" style="margin-left: 8px">
                  {{ orderDetail.customNumberAge }}
                </el-tag>
              </template>
              <template #default="{ row }">
                <div class="copy-cell">
                  <span>{{ row.customNumber }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customNumber)"/>
                  <i v-if="row.customNumber" class="el-icon-view other-icon" @click="getIdentityVisible(row)"/>
                </div>
              </template>
            </el-table-column>


            <el-table-column
              prop="customPackage"
              label="开户套餐" :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.customPackage }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customPackage)"/>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="shouHuoDiZhi"
              label="收货地址" :resizable="false">
              <template #default="{row}">
                <div class="copy-cell">
                  <span>{{ row.shouHuoDiZhi }}</span>
                  <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.shouHuoDiZhi)"/>
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class=" dialog-content-container">
          <el-timeline>
            <el-timeline-item v-for="item in orderFollowTimeList" :key="item.id">
              <el-card>
                <div style="font-size: 16px;">
                  {{ item.title }}
                  <el-tag style="margin-left: 1px;cursor: pointer"
                          v-if="item.title &&  (item.title.includes('交易失败') || item.title.includes('订单废弃'))"
                          @click="generateQR(item.id)" size="mini" type="primary"><i class="el-icon-full-screen"></i>扫码上传
                  </el-tag>
                  <el-tag
                    style="margin-left: 1px; cursor: pointer"
                    v-if="item.title && (item.title.includes('交易失败') || item.title.includes('订单废弃'))"
                    @click="flashFile(item)"
                    size="mini"
                    type="primary">
                    <i class="el-icon-refresh"></i> 刷新结果
                  </el-tag>
                  <el-tag icon="el-icon-refresh" style="margin-left: 1px;cursor: pointer"
                          v-if="item.title &&  (item.title.includes('交易失败') || item.title.includes('订单废弃'))"
                          @click="importImages(item)" size="mini" type="primary"><i class="el-icon-s-platform"></i>上传图片
                  </el-tag>
                  <el-tag style="margin-left: 1px;cursor: pointer"
                          v-if="item.title &&  (item.title.includes('交易失败') || item.title.includes('订单废弃'))"
                          @click="importAudio(item)" size="mini" type="primary"><i class="el-icon-s-platform"></i>上传录音
                  </el-tag>
                  <el-tag style="margin-left: 1px;cursor: pointer"
                          v-if="item.title && (item.title.includes('交易失败') || item.title.includes('订单废弃')) && item.pictureTag"
                          @click="showAttachmentByImages(item.id)" size="mini" type="success"><i
                    class="el-icon-picture"></i>查看图片
                  </el-tag>
                  <el-tag style="margin-left: 1px;cursor: pointer"
                          v-if="item.title && (item.title.includes('交易失败') || item.title.includes('订单废弃'))&& item.audioTag"
                          @click="showAttachmentByAudio(item.id)" size="mini" type="success"><i
                    class="el-icon-s-comment"></i>回放录音
                  </el-tag>
                </div>
                <canvas :ref="'qrcodeCanvas_' + item.id" style="width: 0px; height: 0px;"></canvas>
                <div style="font-size: 14px;color: #676a6c;margin-top: 10px;margin-bottom: 10px">
                  {{ item.content }}
                </div>
                <div style="color: #009dff">
                  {{ formatTimeDifference(item.time) }}
                  {{ formatTime(item.time) }}
                  <span style="margin-left: 10px;color: #676a6c">
                    {{ filterGroupName(item.roleName) }}{{ item.nickName }}
                  </span>
                </div>
                <el-card v-if="item.replyStatus == 2" style="background-color: #f0f1f3">
                  {{ item.replyContent }}
                  <div style="color: #009dff">
                    {{ formatTimeDifference(item.replyTime) }}
                    {{ formatTime(item.replyTime) }}
                    <span style="margin-left: 10px;color: #676a6c">
                    {{ item.auditUserName }}
                  </span>
                  </div>
                </el-card>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!--   交易失败上传图片 -->
    <el-dialog
      title="上传图片"
      :visible.sync="image.open"
      width="400px"
      append-to-body
      :close-on-click-modal="!image.isUploading" :show-close="!image.isUploading">
      <el-upload
        action="#"
        ref="image"
        :limit="5"
        :on-exceed="imageExceed"
        accept=".jpg, .png"
        :headers="image.headers"
        :disabled="image.isUploading"
        :on-change="imageFileChange"
        :before-upload="imageBeforeUpload"
        :auto-upload="false"
        list-type="picture"
        drag
        :file-list="image.uploadFiles"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入jpg, png格式文件,最多5张图片。</span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitImageForm" :loading="image.isUploading" :disabled="image.isUploading">
          {{ image.isUploading ? '上传中...' : '确 定' }}
        </el-button>
        <el-button @click="image.open = false" :disabled="image.isUploading">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="输入认领理由,并确认" :visible.sync="maintainVisible" width="400px">
      <el-form :model="maintainForm" @submit.native.prevent="enterSubmit">
        <el-form-item>
          <el-input type="textarea" v-model="maintainForm.maintainReason" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="maintainVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="maintainFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="输入调回处理中理由,并确认" :visible.sync="recallVisible" width="400px">
      <el-form :model="recallForm" @submit.native.prevent="enterSubmit">
        <el-form-item>
          <el-input type="textarea" v-model="recallForm.content" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="recallVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="recallFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="输入调完结工单理由,并确认" :visible.sync="ks.wanJieFormVisible" width="400px">
      <el-form :model="ks.wanJieForm" @submit.native.prevent="enterSubmit">
        <el-form-item>
          <el-input type="textarea" v-model="ks.wanJieForm.content" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="ks.wanJieFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="ksWanJieFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="输入调关闭工单理由,并确认" :visible.sync="ks.closeFormVisible" width="400px">
      <el-form :model="ks.closeForm" @submit.native.prevent="enterSubmit">
        <el-form-item>
          <el-input type="textarea" v-model="ks.closeForm.content" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="ks.closeFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="ksCloseFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="输入审核工单理由,并确认" :visible.sync="ks.auditFormVisible" width="400px">
      <el-form :model="ks.auditForm" @submit.native.prevent="enterSubmit">

        <el-form-item>
          <el-select v-model="ks.auditForm.auditUserId" placeholder="请选择审核人" style="width: 100%">
            <el-option v-for="item in ks.auditUserIds" :key="item.userId" :label="item.nickName" :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" v-model="ks.auditForm.content" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="ks.auditFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="ksAuditFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="交易成功" :visible.sync="dealVisible" width="600px" :before-close="dealClose">
      <el-form :model="dealForm" @submit.native.prevent="enterSubmit" :label-position="labelPosition"
               label-width="100px">

        <el-form-item label="给佣类型">
          <el-radio-group v-model="dealForm.commissionpriceType" @change="dealTypeChange()">
            <el-radio label="1">即返佣金</el-radio>
            <el-radio label="2">后返佣金</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="给佣金额" v-show="dealForm.commissionpriceType == 1">
          <el-input type="number" v-model="dealForm.commissionprice" placeholder="请输入给佣金额*必填"></el-input>
        </el-form-item>

        <el-form-item label="预设组" v-show="dealForm.commissionpriceType == 2">
          <div class="preset-container">
            <div v-for="(value,key) in presetData" :key="key" class="preset-group" @click="commissionPresetClick(key)">
              <div class="preset-header">
                {{ key }}
              </div>
              <div class="preset-content">
                <div v-for="item in value" :key="item.id" class="preset-item">
                  {{ myBusiness(item.businessId) }} {{ item.userName }} {{ myRadio(item.radio) }}
                </div>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="选择商户" v-show="dealForm.commissionpriceType == 2">
          <el-select style="width: 100%" v-model="dealForm.businessIds" multiple filterable collapse-tags
                     placeholder="分销商户" clearable @change="dealFromSelectChange">
            <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item v-show="dealForm.commissionpriceType == 2 && commissionPresetClickData"
                      v-for="item in commissionPresetClickData" :key="item.id"
                      style="display: flex;justify-content: space-around">
          给佣商户 :
          <el-input :value="item.userName" placeholder="item.userName" disabled
                    style="width: 30%;margin-right: 8%"></el-input>
          给佣比例 :
          <el-input v-model="item.radio" style="width: 30%"></el-input>
        </el-form-item>

        <el-form-item label="已完成备注">
          <el-input type="textarea" v-model="dealForm.content" placeholder="请输入已完成备注"></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="dealClose">取 消</el-button>
        <el-button size="small" type="primary" @click="dealFormConfirm('dealForm')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="添加客诉工单" :visible.sync="addKsOrderVisible" width="800px">
      <el-form :model="addKsOrderForm" @submit.native.prevent="enterSubmit" :label-position="labelPosition"
               v-loading="loading" :rules="addKsOrderFormRules" ref="addKsOrderForm" label-width="80px">

        <el-form-item label="紧急程度" prop="emergency">
          <el-radio-group v-model="addKsOrderForm.emergency ">
            <el-radio label="1">正常</el-radio>
            <el-radio label="2">紧急</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="客诉类型" prop="ksType">
          <el-radio-group v-model="addKsOrderForm.ksType ">
            <el-radio label="1">赠款赔偿</el-radio>
            <el-radio label="2">变更套餐</el-radio>
            <el-radio label="3">装机移机</el-radio>
            <el-radio label="4">取消协议</el-radio>
            <el-radio label="5">拆机销户</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="客诉来源" prop="source">
          <el-radio-group v-model="addKsOrderForm.source ">
            <el-radio label="1">微信</el-radio>
            <el-radio label="2">抖音飞鸽</el-radio>
            <el-radio label="3">内部投诉热线</el-radio>
            <el-radio label="4">运营商投诉热线</el-radio>
            <el-radio label="5">国家职能监管部门</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="问题描述" prop="content">
          <el-input type="textarea" v-model="addKsOrderForm.content" placeholder="请输入详细问题描述"></el-input>
        </el-form-item>
      </el-form>

      <div class="hjfBottomFoot">
        <el-button size="small" @click="addKsOrderFormClose">取 消</el-button>
        <el-button size="small" type="primary" @click="addKsOrderFormConfirm('addKsOrderForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="订单废弃" :visible.sync="cancellationVisible" width="600px">
      <el-form :model="cancellationForm" @submit.native.prevent="enterSubmit"
               ref="cancellationForm" label-width="120px" :rules="cancellationFormRules">

        <el-form-item label="废弃原因" prop="cause">
          <el-select style="width: 100%" v-model="cancellationForm.cause" filterable collapse-tags
                     placeholder="请选择废弃原因" clearable>
            <el-option v-for="(value,key) in cancellationCauseData" :key="key" :label="value" :value="value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="废弃理由" prop="content">
          <el-input type="textarea" v-model="cancellationForm.content" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="cancellationVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="cancellationFormConfirm('cancellationForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="实名完成" :visible.sync="authVisible" width="600px">
      <el-form :model="authForm" :label-position="labelPosition" label-width="120px" :rules="authFormRules"
               ref="authForm" @submit.native.prevent="enterSubmit">
        <el-form-item label="实名完成理由" prop="content">
          <el-input type="textarea" v-model="authForm.content"></el-input>
        </el-form-item>

        <el-form-item label="请选择渠道">
          <el-select style="width: 100%" v-model="authForm.channelId" filterable collapse-tags
                     placeholder="请选择渠道" clearable>
            <el-option v-for="item in orderChannelList" :key="item.id" :label="channelLabelFormat(item)"
                       :value="item.id"/>
          </el-select>
        </el-form-item>

      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="authVisible = false">取 消</el-button>

        <el-button v-if="orderDetail.doudianOrderStatus == 20" size="small" type="primary"
                   @click="authFormConfirm('authForm')">确定并发货
        </el-button>
        <el-button v-else size="small" type="primary" @click="authFormConfirm('authForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!--审核成功-->
    <el-dialog title="仅可审核一次,通过后会进入待发货状态!" :visible.sync="auditSuccessVisible" width="400px">
      <el-form :model="auditSuccessForm" :rules="auditSuccessFormRules"
               ref="auditSuccessForm" @submit.native.prevent="enterSubmit">
        <el-form-item prop="content">
          <el-input type="textarea" placeholder="请填写审核成功的备注" v-model="auditSuccessForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="auditSuccessVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="auditSuccessFormConfirm('auditSuccessForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--审核失败-->
    <el-dialog title="仅可审核一次,拒绝后会立即退款并关闭订单!" :visible.sync="auditFailVisible" width="400px">
      <el-form :model="auditFailForm" :rules="auditFailFormRules"
               ref="auditFailForm" @submit.native.prevent="enterSubmit">
        <el-form-item prop="content">
          <el-input type="textarea" placeholder="请填写审核失败的备注" v-model="auditFailForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="auditFailVisible = false">取 消</el-button>

        <el-button size="small" type="primary" @click="auditFailFormConfirm('auditFailForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加报账" :visible.sync="baoZhangVisible" width="600px">
      <el-form :model="baoZhangForm" :label-position="labelPosition" label-width="120px" :rules="baoZhangFormRules"
               ref="baoZhangForm" @submit.native.prevent="enterSubmit">

        <el-form-item label="报账金额" prop="baoZhangPrice">
          <el-input type="number" v-model="baoZhangForm.baoZhangPrice"></el-input>
        </el-form-item>

        <el-form-item label="费用理由" prop="content">
          <el-input type="textarea" v-model="baoZhangForm.content"></el-input>
        </el-form-item>

        <el-form-item label="弹窗提醒" prop="manageId">
          <el-select style="width: 100%" v-model="baoZhangForm.manageId" filterable collapse-tags
                     placeholder="请选择提醒管理员" clearable>
            <el-option v-for="item in sysUserList" :key="item.userId" :label="item.nickName"
                       :value="item.userId"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="baoZhangVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="baoZhangConfirm('baoZhangForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="请再次输入报账金额,并确认" :visible.sync="baoZhangFormInsideVisible" width="300px">
      <el-form :model="baoZhangFormInside" :label-position="labelPosition" @submit.native.prevent="enterSubmit"
               :rules="baoZhangFormInsideRules"
               ref="baoZhangFormInside">
        <el-form-item prop="baoZhangPrice">
          <el-input type="number" v-model="baoZhangFormInside.baoZhangPrice"
                    placeholder="请再次输入报账金额,并确认"></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="baoZhangFormInsideVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="baoZhangFormInsideConfirm('baoZhangFormInside')">确 定
        </el-button>
      </div>
    </el-dialog>


    <el-dialog title="交易失败" :visible.sync="loserVisible" width="600px">
      <el-form :model="loserForm" :label-position="labelPosition" label-width="120px" :rules="loserFormRules"
               ref="loserForm" @submit.native.prevent="enterSubmit">

        <el-form-item label="失败原因" prop="cause">
          <el-select style="width: 100%" v-model="loserForm.cause" filterable collapse-tags
                     placeholder="请选择失败原因" clearable>
            <el-option v-for="(value,key) in loserCauseData" :key="key" :label="value" :value="value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="失败理由" prop="content">
          <el-input type="textarea" v-model="loserForm.content" placeholder="请输入失败理由"></el-input>
        </el-form-item>

      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="loserVisible = false">取 消</el-button>
        <el-button v-if="orderDetail.doudianOrderStatus == 10" size="small" type="primary"
                   @click="loserConfirm('loserForm')">确定并回传审核失败
        </el-button>
        <el-button v-else size="small" type="primary" @click="loserConfirm('loserForm')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="添加跟进" :visible.sync="addGenJinVisible" width="800px" :before-close="addGenJinClose">
      <el-form :model="addGenJinForm" :label-position="labelPosition" label-width="120px" :rules="dynamicRules"
               ref="addGenJinForm" @submit.native.prevent="enterSubmit">

        <el-form-item label="紧急状态">
          <el-radio v-model="addGenJinForm.emergentStatus" label="1">正常</el-radio>
          <el-radio v-model="addGenJinForm.emergentStatus" label="2">紧急</el-radio>
        </el-form-item>

        <el-form-item label="展现对象">
          <el-checkbox-group v-model="addGenJinForm.displayObjects">
            <el-checkbox label="2">会员端</el-checkbox>
            <el-checkbox label="3">供应商</el-checkbox>
            <el-checkbox label="4">分销商</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="跟进类型">
          <el-radio-group v-model="addGenJinForm.type" @change="addGenJinTypeChange()">
            <el-radio label="10">跟进内容</el-radio>
            <el-radio v-if="hasRole('xiezhuankefu,gendankefu,doudianyunying,zonghezhicheng,admin,caiwu')" label="20">
              客户信息
            </el-radio>
            <el-radio
              v-if="hasRole('xiezhuankefu,gendankefu,gendankefu,caiwu,zonghezhicheng,admin,doudianyunying') && (orderDetail.doudianOrderStatus == 10 || orderDetail.doudianOrderStatus == 20)"
              label="30">
              物流信息
            </el-radio>
            <el-radio v-if="hasRole('xiezhuankefu,gendankefu,doudianyunying,caiwu,zonghezhicheng,admin')" label="40">
              添加标签
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-show="type10Visible">
          <el-form-item label="跟进内容" prop="defineLabelNotes">
            <el-input type="textarea" v-model="addGenJinForm.defineLabelNotes" placeholder="请输入跟进内容"></el-input>
          </el-form-item>

          <el-form-item label="定义标签">
            <el-input v-model="addGenJinForm.defineLabel"
                      placeholder="非必填,若需使用请输入6字内的定义标签,标签将在列表展示"></el-input>
          </el-form-item>

          <el-form-item label="失效节点">
            <el-select style="width: 100%" v-model="addGenJinForm.defineLabelStatus" filterable collapse-tags
                       placeholder="请选择以上定义标签在哪个环节失效" clearable>
              <el-option v-for="item in defineLabelStatusData" :key="item.key" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>

          <el-form-item :label="addGenJinForm.goAudit ? '弹窗通知':'弹窗审核'">
            <div style="display: flex;justify-content: space-between">
              <el-checkbox v-model="addGenJinForm.goAudit">仅通知</el-checkbox>
              <el-select style="width: 80%" v-model="addGenJinForm.auditUser" filterable collapse-tags
                         :placeholder="addGenJinForm.goAudit ? '请选择接收人':'请选择审核人'" clearable>
                <el-option v-for="item in sysUserList" :key="item.userId" :label="item.nickName"
                           :value="item.userId"/>
              </el-select>
            </div>
          </el-form-item>
        </div>

        <div v-show="type20Visible">
          <el-form-item label="证件姓名" prop="customName">
            <el-input v-model="addGenJinForm.customName"></el-input>
          </el-form-item>
          <el-form-item label="证件号码" prop="customNumber">
            <el-input v-model="addGenJinForm.customNumber"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="customTel">
            <el-input v-model="addGenJinForm.customTel"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" prop="customAddress">
            <el-input v-model="addGenJinForm.customAddress"></el-input>
          </el-form-item>
          <el-form-item label="开户套餐" prop="customPackage">
            <el-input v-model="addGenJinForm.customPackage"></el-input>
          </el-form-item>
          <el-form-item label="订单金额" prop="orderprice">
            <el-input v-model="addGenJinForm.orderprice"></el-input>
          </el-form-item>
          <el-form-item label="订单金额批注">
            <el-input v-model="addGenJinForm.orderpriceNote"></el-input>
          </el-form-item>
          <!--          <el-form-item label="宽带标签">-->
          <!--            <el-input v-model="addGenJinForm.labelNotes"></el-input>-->
          <!--          </el-form-item>-->
        </div>

        <div v-show="type20Visible_douDian">
          <el-form-item label="证件姓名" prop="customName">
            <el-input v-model="addGenJinForm.customName"></el-input>
          </el-form-item>
          <el-form-item label="证件号码" prop="customNumber">
            <el-input v-model="addGenJinForm.customNumber"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="customTel">
            <el-input v-model="addGenJinForm.customTel"></el-input>
          </el-form-item>

          <el-form-item label="省/市/区/街道" prop="shengId">
            <div style="display: flex; justify-content:space-between">
              <el-input v-model="addGenJinForm.shengId" style="width: 20%" placeholder="省"></el-input>
              <el-input v-model="addGenJinForm.cityId" style="width: 20%" placeholder="市"></el-input>
              <el-input v-model="addGenJinForm.areaId" style="width: 20%" placeholder="区"></el-input>
              <el-input v-model="addGenJinForm.streetId" style="width: 36%" placeholder="街道"></el-input>
            </div>
          </el-form-item>

          <el-form-item label="收货地址" prop="customAddress">
            <el-input v-model="addGenJinForm.customAddress"></el-input>
          </el-form-item>
        </div>

        <div v-show="type30Visible">
          <el-form-item label="快递公司" prop="logisticCompany">
            <el-select style="width: 100%" v-model="addGenJinForm.logisticCompany" filterable collapse-tags
                       placeholder="请选择快递公司" clearable>
              <el-option v-for="item in logisticCompanyList" :key="item.key" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>

          <el-form-item label="快递单号">
            <el-input type="text" v-model="addGenJinForm.logisticSerial"
                      placeholder="请输入快递单号(无需物流时不需要填写)"></el-input>
          </el-form-item>

          <el-form-item label="手机尾号">
            <el-input type="text" v-model="addGenJinForm.logisticPhoneSuffix"
                      placeholder="顺丰速运/丰网速运需要录入收件人或寄件人的手机号后4位,其它快递无需录入"></el-input>
          </el-form-item>
        </div>

        <div v-show="type40Visible">
          <el-form-item label="标签">
            <el-checkbox-group v-model="addGenJinForm.labelType" @change="labelTypeChange">
              <el-checkbox label="1" :disabled="true">宽带单</el-checkbox>
              <el-checkbox label="2" :disabled="baiMingDanOnlyRead">白名单</el-checkbox>
              <el-checkbox label="3">黑名单</el-checkbox>
              <el-checkbox label="4" :disabled="weiXiDanOnlyRead">维系单</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="宽带备注">
            <el-input v-model="addGenJinForm.note1Data" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="白名单备注" v-show="baiMingDanVisible">
            <el-input placeholder="白名单只能填写一次,且不能修改,请认真填写内容." v-model="addGenJinForm.note2Data"
                      :disabled="baiMingDanOnlyRead"></el-input>
          </el-form-item>

          <el-form-item label="黑名单备注" v-show="heiMingDanVisible">
            <el-input :disabled="heiMingDanOnlyRead" v-model="addGenJinForm.note3Data"></el-input>
          </el-form-item>

          <el-form-item label="取消黑名单备注" v-show="heiMingDanVisibleFalse">
            <el-input v-model="addGenJinForm.note5Data"></el-input>
          </el-form-item>

          <el-form-item label="维系单备注" v-show="weiXiDanVisible">
            <el-input placeholder="维系单只能填写一次,且不能修改,请认真填写内容." v-model="addGenJinForm.note4Data"
                      :disabled="weiXiDanOnlyRead"></el-input>
          </el-form-item>
        </div>

      </el-form>

      <div class="hjfBottomFoot">
        <el-button size="small" @click="addGenJinClose" style="margin-right: 1px">取 消</el-button>
        <div>
          <el-button v-if="(orderDetail.type == 5 || orderDetail.type == 6) && type30Visible " size="small"
                     type="primary" @click="addGenJinFormConfirm('addGenJinForm')">抖店发货
          </el-button>
          <el-button v-else size="small" type="primary" @click="addGenJinFormConfirm('addGenJinForm')">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="打标已激活" :visible.sync="activationVisible" width="600px">
      <el-form :model="activationForm" :label-position="labelPosition" label-width="120px" :rules="activationFormRules"
               ref="activationForm" @submit.native.prevent="enterSubmit">

        <el-form-item label="激活日期" prop="activationTime">
          <el-date-picker
            style="width: 100%"
            v-model="activationForm.activationTime"
            type="date"
            format="yyyyMMdd"
            placeholder="请选择激活日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="用户标识号" prop="identificationNumber">
          <el-input type="number" v-model="activationForm.identificationNumber"
                    placeholder="请输入用户标识号"></el-input>
        </el-form-item>

        <el-form-item label="首充金额" prop="firstChargePrice">
          <el-input type="number" v-model="activationForm.firstChargePrice" placeholder="请输入首充金额"></el-input>
        </el-form-item>


      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="activationVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="activationConfirm('activationForm')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="请再次输入日期,并确认" :visible.sync="activationFormInsideVisible" width="300px"
               style="margin-top: 5%; margin-left: 20%">
      <el-form :model="activationFormInside" :label-position="labelPosition" @submit.native.prevent="enterSubmit"
               :rules="activationFormInsideRules" ref="activationFormInside">
        <el-form-item prop="activationTime">
          <el-input v-model="activationFormInside.activationTime"
                    placeholder="请再次输入日期,并确认"></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="activationFormInsideVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="activationFormInsideConfirm('activationFormInside')">确 定
        </el-button>
      </div>
    </el-dialog>


    <el-dialog title="输入退单理由,并确认" :visible.sync="authBackVisible" width="350px">
      <el-form :model="authBackForm" :label-position="labelPosition" :rules="authBackFormRules"
               ref="authBackForm" @submit.native.prevent="enterSubmit">
        <el-form-item prop="content">
          <el-input type="textarea" v-model="authBackForm.content" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="authBackVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="authBackFormConfirm('authBackForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改电话号码" :visible.sync="form_telNumberVisible" width="20%">
      <el-form :model="from_telNumber" :rules="telNumberRules" ref="from_telNumber"
               @submit.native.prevent="enterSubmit">
        <el-form-item prop="telNumber">
          <el-input v-model.number="from_telNumber.telNumber" placeholder="请输入11数电话号码" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form_telNumberVisible = false">取 消</el-button>
        <el-button type="primary" @click="formTelNumberVisibleConfirm()">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="请输入揽收理由,并确认!" :visible.sync="takeOrderVisible" width="400px">
      <el-form :model="takeOrderForm" @submit.native.prevent="enterSubmit">
        <el-form-item>
          <el-input type="content" v-model="takeOrderForm.content" placeholder="请输入.."></el-input>
        </el-form-item>
      </el-form>
      <div class="hjfBottomFoot">
        <el-button size="small" @click="takeOrderVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="takeOrder(takeOrderForm)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="this.orderDetail.serial+'图片列表'" :visible.sync="showAttachmentImagesDiagLogVisible"
               width="800px">
      <div class="image-grid">
        <div v-for="item in attachmentImagesList" :key="item.id">
          <el-card :body-style="{ padding: '2px' }" shadow="hover">
            <el-image
              :preview-src-list="[item.fullPath]"
              :src="item.fullPath"
              lazy
              style="width: 100%; height: 180px; object-fit: contain;"
            ></el-image>
            <el-tag type="danger" @click="deleteImage(item)" style="width: 100%;cursor: pointer">
              <span style="color:#188dfa;margin-right: 6px">
                {{ item.createTime }}<span style="margin-left: 4px">{{ item.nickName }}</span>上传
              </span>
              删除
            </el-tag>
          </el-card>
        </div>
      </div>
    </el-dialog>


    <el-dialog :title="this.orderDetail.serial+'客诉图片列表'" :visible.sync="ksShowAttachmentImagesDiagLogVisible"
               width="800px">
      <div class="image-grid">
        <div v-for="item in ksAttachmentImagesList" :key="item.id">
          <el-card :body-style="{ padding: '2px' }" shadow="hover">
            <el-image
              :preview-src-list="[item.fullPath]"
              :src="item.fullPath"
              lazy
              style="width: 100%; height: 180px; object-fit: contain;"
            ></el-image>
            <el-tag type="danger" @click="ksDeleteAttachment(item)" style="width: 100%;cursor: pointer">
              <!--              <span style="color:#188dfa;margin-right: 6px">-->
              <!--                {{ item.createTime }}<span style="margin-left: 4px">{{ item.nickName }}</span>上传-->
              <!--              </span>-->
              删除
            </el-tag>
          </el-card>
        </div>
      </div>
    </el-dialog>


    <el-dialog :title="this.orderDetail.serial+'客诉录音列表'" :visible.sync="ksShowAttachmentAudioDiagLogVisible"
               width="800px">
      <div>
        <div v-for="(audio, index) in audioKsAttachmentList" :key="index" class="audio-item">
          <p>{{ audio.objectPath }}</p>
          <div style="display:flex; align-items: center">
            <audio controls :src="audio.fullPath"></audio>
            <el-tag size="medium" type="danger" @click="ksDeleteAttachment(audio)"
                    style="margin-left:4px;cursor: pointer">
              <!--              <span style="color:#188dfa;margin-right: 6px">-->
              <!--                {{ audio.createTime }}<span style="margin-left: 4px">{{ audio.nickName }}</span>上传-->
              <!--              </span>-->
              删除
            </el-tag>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog :title="this.orderDetail.serial+'录音列表'" :visible.sync="showAttachmentAudioDiagLogVisible"
               width="800px">
      <div>
        <div v-for="(audio, index) in audioList" :key="index" class="audio-item">
          <p>{{ audio.objectPath }}</p>
          <div style="display:flex; align-items: center">
            <audio controls :src="audio.fullPath"></audio>
            <el-tag size="medium" type="danger" @click="deleteAudio(audio)" style="margin-left:4px;cursor: pointer">
              <span style="color:#188dfa;margin-right: 6px">
                {{ audio.createTime }}<span style="margin-left: 4px">{{ audio.nickName }}</span>上传
              </span>
              删除
            </el-tag>
          </div>
        </div>
      </div>
    </el-dialog>


    <el-dialog
      :title="audio.title"
      :visible.sync="audio.open"
      width="400px"
      append-to-body
      :close-on-click-modal="!audio.isUploading"
      :show-close="!audio.isUploading"
    >
      <el-upload
        action="#"
        ref="audio"
        :limit="5"
        :on-exceed="audioExceed"
        accept=".wav,.mp3,.m4a"
        :headers="audio.headers"
        :disabled="audio.isUploading"
        :on-change="audioFileChange"
        :before-upload="audioBeforeUpload"
        :auto-upload="false"
        drag
        :file-list="audio.uploadFiles"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入mp3/wav/m4a格式文件,每个小于5M,最多3段录音</span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAudioForm" :loading="audio.isUploading" :disabled="audio.isUploading">
          {{ audio.isUploading ? '上传中...' : '确 定' }}
        </el-button>
        <el-button @click="audio.open = false" :disabled="audio.isUploading">取 消</el-button>
      </div>
    </el-dialog>


    <!--客诉上传录音-->
    <el-dialog
      title="客诉上传录音"
      :visible.sync="ks.audio.open"
      width="400px"
      append-to-body
      :close-on-click-modal="!ks.audio.isUploading"
      :show-close="!ks.audio.isUploading"
    >
      <el-upload
        action="#"
        ref="audio"
        :limit="5"
        accept=".wav,.mp3,.m4a"
        :headers="ks.audio.headers"
        :disabled="ks.audio.isUploading"
        :on-exceed="audioExceed"
        :on-change="ksAudioFileChange"
        :before-upload="audioBeforeUpload"
        :auto-upload="false"
        drag
        :file-list="ks.audio.uploadFiles"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入mp3/wav/m4a格式文件,每个小于5M,最多3段录音</span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitKsAudioForm" :loading="ks.audio.isUploading"
                   :disabled="ks.audio.isUploading">
          {{ audio.isUploading ? '上传中...' : '确 定' }}
        </el-button>
        <el-button @click="closeKsAudioUploadPage" :disabled="ks.audio.isUploading">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog v-show="true" :title="ksOrder.title" :visible.sync="ksOrderDetailVisible"
               width="60%" style="height: 80%"
               @close="ksOrderClose" @open="goKsOrderDetail">

      <div style="display: flex;justify-content: space-between;align-items: flex-start; margin-bottom: 14px">
        <div style="width: 66%">
          <el-steps :active="Number(ks.active)" finish-status="success">
            <el-step v-for="item in ks.stepsTitleList" :title="item" :key="item"></el-step>
          </el-steps>
        </div>

        <div style="width: 16%;display: flex;justify-content: flex-end;">
          <el-button type="success" size="small" @click="flushKsOrderLog">刷新消息
          </el-button>
          <el-button type="primary" size="small" v-show="ksOrder.state == 2" @click="ksAddAuditPermise">方案审核
          </el-button>
          <el-button type="primary" size="small" @click="ksWanJieOrderPremise"
                     v-show="(ksOrder.state == 3 && !ksOrder.auditUser) ||ksOrder.state == 4">完结工单
          </el-button>
          <el-button type="primary" size="small" @click="ksCloseOrderPremise" v-show="ksOrder.state == 2">关闭工单
          </el-button>
        </div>
      </div>

      <div style="display: flex;justify-content: space-between;">
        <div style="width: 26%">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>工单信息</span>
            </div>
            <div class="myTitle">
              客诉时间
            </div>
            <div>
              {{ ksOrder.createTime }}
            </div>
            <div class="myTitle">
              客诉来源
            </div>
            <div>
              {{ sourceMap[ksOrder.source] }}
            </div>
            <div class="myTitle">
              客诉类型
            </div>
            <div>
              {{ ksTypeMap[ksOrder.ksType] }}
            </div>
            <div class="myTitle">
              紧急程度
            </div>
            <div>
              {{ emergencyMap[ksOrder.emergency] }}
            </div>
            <div class="myTitle">
              工单编号
            </div>
            <div>
              {{ ksOrder.ksId }}
            </div>
            <div class="myTitle">
              订单编号
            </div>
            <div>
              {{ ksOrder.orderId }}
            </div>

            <div class="myTitle">
              客户姓名
            </div>
            <div>
              {{ ksOrder.customName }}
            </div>

            <div class="myTitle">
              证件号码
            </div>
            <div>
              {{ ksOrder.customNumber }}
            </div>
            <div class="myTitle">
              客户年龄
            </div>
            <div>
              {{ ksOrder.customNumberAge }}
            </div>
            <div class="myTitle">
              订单号码
            </div>
            <div>
              {{ ksOrder.telNumber }}
            </div>
            <div class="myTitle">
              联系电话
            </div>
            <div>
              {{ ksOrder.customTel }}
            </div>
            <div class="myTitle">
              联系地址
            </div>
            <div>
              {{ ksOrder.customAddress }}
            </div>
            <div class="myTitle">
              渠道信息
            </div>
            <div>

              {{ ksOrder.channelName }}/{{ ksOrder.channelCode }}
            </div>

            <div class="myTitle">
              渠管信息
            </div>
            <div>
              {{ ksOrder.contactUser }}
            </div>
            <div class="myTitle">
              描述信息
            </div>
            <div>
              {{ ksOrder.content }}
            </div>
          </el-card>
        </div>
        <div style="width: 72%;">
          <el-card class="box-card">
            <el-timeline>
              <el-timeline-item timestamp="发送消息" placement="top">
                <el-card :body-style="{padding: '10px' }">
                  <el-form :model="ksOrderReplyForm">
                    <!--              <el-input v-show="referenceVisible" v-model="ksOrderReplyForm.referenceContent" />-->
                    <el-tag size="mini" type="info" v-show="ksOrderReplyForm.referenceVisible" closable
                            @close="ksFormClose()">
                      {{ ksOrderReplyForm.creteTime }} {{ ksOrderReplyForm.replyNickName }} :

                      <span style="color:#409EFF">
                          {{ ksOrderReplyForm.referenceContent }}
                      </span>

                    </el-tag>
                    <div style="display: flex; justify-content: space-between;margin-bottom: 2px">
                      <el-input type="textarea" v-model="ksOrderReplyForm.replyContent"></el-input>
                      <el-button type="primary" style="margin-left: 2px" size="mini" @click="ksOrderReplyFormSubmit">发送
                      </el-button>
                    </div>
                    <div>
                      <el-tag icon="el-icon-refresh" style="margin-left: 1px;cursor: pointer"
                              @click="importKsOrderImage()" size="mini" type="primary">
                        <i class="el-icon-s-platform"></i>上传图片
                      </el-tag>
                      <el-tag style="margin-left: 1px;cursor: pointer"
                              @click="ksImportAudio()" size="mini" type="primary">
                        <i class="el-icon-s-platform"></i>上传录音
                      </el-tag>
                    </div>
                  </el-form>
                </el-card>
              </el-timeline-item>
              <el-timeline-item
                :timestamp="item.createTime+' '+item.roleName+'-'+item.nickName"
                placement="top"
                v-for="item in ksOrderReplayLogs"
                :key="item.id">
                <el-card :body-style="{padding: '10px' }" :class="{'gray-bg': !contentCheck(item.replyContent)}">
                  <div>
                    <el-link icon="el-icon-s-comment" type="info" v-show="item.referenceContent" disabled>
                      {{ item.referenceTime }} {{ item.referenceNickName }} : {{ item.referenceContent }}
                    </el-link>
                  </div>
                  <div>
                    {{ item.replyContent }}
                  </div>
                  <div style="display: flex;justify-content: space-between;margin-top: 2px">
                    <div style=" display: flex;justify-content: flex-start">
                      <el-tag style="margin-left: 1px;cursor: pointer" v-show="item.imageKsAttachmentList"
                              @click="ksShowAttachmentByImages(item.imageKsAttachmentList)" size="mini" type="success">
                        <i class="el-icon-picture"></i>查看图片
                      </el-tag>
                      <el-tag style="margin-left: 1px;cursor: pointer" v-show="item.audioKsAttachmentList"
                              @click="ksShowAttachmentByAudio(item.audioKsAttachmentList)" size="mini" type="success"><i
                        class="el-icon-s-comment"></i>回放录音
                      </el-tag>
                    </div>
                    <el-tag size="mini" v-if="contentCheck(item.replyContent)" type="info"
                            @click="preReferenceContent(item)" effect="plain">回复
                    </el-tag>
                  </div>
                </el-card>
              </el-timeline-item>

            </el-timeline>
          </el-card>
        </div>
      </div>
    </el-dialog>


    <!--    客诉上传图片-->
    <el-dialog
      title="客诉上传图片"
      :visible.sync="ks.image.open"
      width="400px"
      append-to-body
      :close-on-click-modal="!ks.image.isUploading" :show-close="!ks.image.isUploading">
      <el-upload
        action="#"
        ref="ksImage"
        :limit="5"
        :on-exceed="imageExceed"
        accept=".jpg, .png"
        :headers="ks.image.headers"
        :disabled="ks.image.isUploading"
        :on-change="ksImageFileChange"
        :before-upload="imageBeforeUpload"
        :auto-upload="false"
        list-type="picture"
        drag
        :file-list="ks.image.uploadFiles"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入jpg, png格式文件,最多5张图片。</span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitKsImageForm" :loading="ks.image.isUploading"
                   :disabled="ks.image.isUploading">
          {{ ks.image.isUploading ? '上传中...' : '确 定' }}
        </el-button>
        <el-button @click="closeKsImageUploadPage" :disabled="ks.image.isUploading">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script setup>
import QRCode from 'qrcode';
import {getToken} from "@/utils/auth";

import {
  addKsOrderReplyLogAndUpload,
  auditFail,
  auditSuccess,
  deleteAttachment,
  editByIdAndCurrent,
  editOrderActivation,
  editOrderAddGenJin10,
  editOrderAddGenJin20,
  editOrderAddGenJin30,
  editOrderAddGenJin40,
  editOrderAuthBack,
  editOrderBaoZhang,
  editOrderByCancellation,
  editOrderByDeal,
  editOrderByRecall,
  editOrderLoser,
  editOrderState5,
  getAttachmentImagesByFollowId,
  getIdentityVisible,
  getKsTempUrl,
  getOrderDetailById,
  getOrderFollowDetailById,
  getPhoneVisible,
  getSupplierNameVisible,
  handDecrypt,
  ksAddAuditUserId,
  ksDeleteAttachment,
  orderChannelSimpleList,
  takeOrder,
  updateByTelNumber,
  updateOrderTelAndForce,
  uploadOrderAudios,
  uploadOrderImages,
} from "@/api/hmk/order"
import {getOrderFollowById} from "@/api/hmk/follow"
import moment from "moment";
import {enterSubmit, filterFollowType} from "@/utils/hjf-common"
import {getCancellationCauseData, getLoserCauseData} from "@/api/hmk/systemConfig"
import {selectAll} from "@/api/hmk/commissionPresetGroup";
import {selectRxTelByTel} from "@/api/hmk/tel";
import {addKsOrder} from "@/api/order/class";
import {listKsOrderReplyLog, selectRxOrderBySerial, selectUsersByIds} from "@/api/hmk/ksOrder";
import ksOrder from "@/views/hmk/ksOrder/index.vue";

const fullRules = {
  defineLabelNotes: [{required: true, message: '请输入内容', trigger: 'blur'}],
  customName: [{required: true, message: '请输入证件姓名', trigger: 'blur'}],
  customNumber: [{required: true, message: '请输入证件号码', trigger: 'blur'}, {
    validator: (rule, value, callback) => {
      if (value.length >= 15 && value.length <= 19) {
        callback();
      } else {
        callback(new Error('长度必须为15-19位'));
      }
    },
    trigger: 'blur'
  }],
  customTel: [{required: true, message: '请输入联系电话', trigger: 'blur'}, {
    len: 11,
    message: '联系电话必须为11位',
    trigger: 'blur'
  }],
  customAddress: [{required: true, message: '请输入收货地址', trigger: 'blur'}],
  customPackage: [{required: true, message: '请输入开户套餐', trigger: 'blur'}],
  orderprice: [{required: true, message: '请输入金额', trigger: 'blur'}],
  shengId: [{required: true, message: '请输入省/市/区/街道', trigger: 'blur'}],
};
export default {

  name: 'order_follow',
  props: ['rowId'],
  computed: {
    ksTypeMap() {
      return {
        1: "赠款赔偿",
        2: "变更套餐",
        3: "装机移机",
        4: "取消协议",
        5: "拆机销户",
      }
    },
    emergencyMap() {
      return {
        1: "正常",
        2: "紧急",
      }
    },
    sourceMap() {
      return {
        1: "微信",
        2: "抖音飞鸽",
        3: "内部投诉热线",
        4: "运营商投诉热线",
        5: "国家职能监管部门",
      }
    },
    stateMap() {
      return {
        1: "待处理",
        2: "处理中",
        3: "待审核",
        4: "已过审",
        5: "已完结",
        6: "已关闭",
      }
    },

    dialogTitle() {
      let title = this.orderDetail.serial;
      if (this.orderDetail.doudianOrderId) {
        title += '/' + this.orderDetail.doudianOrderId;
      }
      if (this.orderDetail.doudianOrderProductId) {
        title += '/' + this.orderDetail.doudianOrderProductId;
      }
      title += '跟进记录';
      return title;
    },
    cancellation_isShowButton() {
      if (this.orderDetail.state == 7 || this.orderDetail.state == 8) {
        return true;
      } else {
        return false;
      }
    },
    recall_isShowButton() {
      if (this.orderDetail.state == 7 || this.orderDetail.state == 8) {
        return true;
      } else {
        return false;
      }
    },
    addGenJin_isShowButton() {
      if (this.orderDetail.state == 2 || this.orderDetail.state == 3 || this.orderDetail.state == 4 || this.orderDetail.state == 5 || this.orderDetail.state == 6 || this.orderDetail.state == 7 || this.orderDetail.state == 8 || this.orderDetail.state == 9) {
        return true;
      } else {
        return false;
      }
    },
    maintainManage_isShowButton() {
      if ((this.orderDetail.state == 2 || this.orderDetail.state == 3
        || this.orderDetail.state == 4 || this.orderDetail.state == '5'
        || this.orderDetail.state == 6 ||
        this.orderDetail.state == 7 || this.orderDetail.state == 8) && !this.orderDetail.maintainManageId) {
        return true;
      } else {
        return false;
      }
    },
    auth_isShowButton() {
      if (this.orderDetail.state == 2 || this.orderDetail.state == 3 || this.orderDetail.state == 9) {
        return true;
      } else {
        return false;
      }
    },
    biaoQian_isShowButton() {
      if (this.orderDetail.state == 2 || this.orderDetail.state == 3 || this.orderDetail.state == 5 || this.orderDetail.state == 9) {
        return true;
      } else {
        return false;
      }
    },
    baoZhang_isShowButton() {
      if (this.orderDetail.state == 2 || this.orderDetail.state == 3 || this.orderDetail.state == 4 || this.orderDetail.state == 5 || this.orderDetail.state == 9) {
        return true;
      } else {
        return false;
      }
    },
    loser_isShowButton() {
      if (this.orderDetail.doudianOrderStatus == 10) {
        return false;
      } else if (this.orderDetail.state == 2 || this.orderDetail.state == 3 || this.orderDetail.state == 9) {
        return true;
      } else {
        return false;
      }
    },
    activation_isShowButton() {
      if (this.orderDetail.state == 5 && this.orderDetail.isActivation == 1) {
        return true;
      } else {
        return false;
      }
    },

    authBack_isShowButton() {
      if (this.orderDetail.state == 5 && this.orderDetail.isActivation == 1) {
        return true;
      } else {
        return false;
      }
    },
    computedOrderDetail() {
      return {
        ...this.orderDetail,
        content: this.orderDetail.content || '--',
        shouHuoDiZhi: (this.orderDetail.shengId || '') + (this.orderDetail.cityId || '') + (this.orderDetail.areaId || '') + (this.orderDetail.streetId || '') + (this.orderDetail.realAddress || '')
      }
    },
    filterSpecList() {
      if (this.orderDetail.doudianOrderSpecList && this.orderDetail.doudianOrderSpecList.length > 0) {
        return this.orderDetail.doudianOrderSpecList.slice(0, -1);
      }
    },
    filterSpecListLast() {
      if (this.orderDetail.doudianOrderSpecList && this.orderDetail.doudianOrderSpecList.length == 3) {
        return (this.orderDetail.telNumber == null ? ' ' : this.orderDetail.telNumber) + "<br>" + this.orderDetail.doudianOrderSpecList.at(-1).value;
      } else {
        return (this.orderDetail.telNumber == null ? ' ' : this.orderDetail.telNumber);
      }
    },
    filterSpecListLast2() {
      if (this.orderDetail.doudianOrderSpecList && this.orderDetail.doudianOrderSpecList.length == 3) {
        return this.orderDetail.doudianOrderSpecList.at(-1).value;
      } else {
        return '';
      }
    }
  },
  data() {
    var validateTelNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'));
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的11位手机号码'));
      } else {
        callback();
      }
    };


    return {
      dialogVisible: true,
      ks: {
        guanBi: ["分配专员", "开始处理", "关闭工单"],
        zhengChang: ["分配专员", "开始处理", "方案审核", "执行解决", "完结工单"],
        stepsTitleList: this.zhengChang,
        wanJieFormVisible: false,
        wanJieForm: {
          content: null,
        },
        auditForm: {
          auditUserId: null,
          content: null,
        },
        auditUserIds: [],
        auditFormVisible: false,
        closeFormVisible: false,
        closeForm: {
          content: null,
        },
        active: 1,
        image: {
          imageResUrls: [],
          uploadFiles: [],
          open: false,
          isUploading: false,
          headers: {Authorization: "Bearer " + getToken()}
        },

        audio: {
          audioResUrls: [],
          uploadFiles: [],
          open: false,
          isUploading: false,
          headers: {Authorization: "Bearer " + getToken()}
        },
      },


      ksOrderReplayLogs: [],
      ksOrderReplyForm: {
        referenceVisible: false,
        replyContent: null,
        referenceContent: null,
        referenceId: null,
      }
      ,
      ksOrder: {
        id: null,
        orderId: null,
        customName: null,
        customNumber: null,
        customAddress: null,
        customTel: null,
        customNumberAge: null,
        channelName: null,
        channelCode: null,
        contactUser: null,

      }
      ,
      ksOrderDetailVisible: false,
      addKsOrderFormRules:
        {
          source: [
            {required: true, message: '请选择客诉来源!', trigger: 'change'}
          ],
          emergency:
            [
              {required: true, message: '请选择紧急情况!', trigger: 'change'}
            ],
          ksType:
            [
              {required: true, message: '请选择客诉类型!', trigger: 'change'}
            ],
          content:
            [
              {required: true, message: '请填写问题描述信息!', trigger: 'change'}
            ],
        }
      ,

      addKsOrderForm: {
        source: null,
        emergency:
          null,
        ksType:
          null,
        content:
          null,
      }
      ,
      loading: false,
      addKsOrderVisible:
        false,
      orderId:
        null,
      followId:
        null,
      userId:
        null,
      audioResUrls:
        [],
      audio:
        {
          uploadFiles: [],
          open: false,
          title: "",
          isUploading: false,
          updateSupport: 0,

          headers:
            {
              Authorization: "Bearer " + getToken()
            }
          ,
        }
      ,
      imageResUrls: [],

      image:
        {
          uploadFiles: [],
          open:
            false,
          title:
            "",
          isUploading:
            false,
          updateSupport:
            0,

          headers:
            {
              Authorization: "Bearer " + getToken()
            }
          ,
        }
      ,
      audioList: [],
      showAttachmentAudioDiagLogVisible: false,
      audioKsAttachmentList: [],
      ksShowAttachmentAudioDiagLogVisible: false,
      isPlaying:
        [],
      currentAudioIndex:
        null,
      attachmentImagesList:
        [],

      showAttachmentImagesDiagLogVisible:
        false,

      ksAttachmentImagesList:
        [],
      ksShowAttachmentImagesDiagLogVisible:
        false,
      takeOrderForm:
        {
          content: null
        }
      ,
      takeOrderVisible: false,
      fit:
        false,
      orderChannelList:
        [],
      telIsNullTag:
        false,
      form_telNumberVisible:
        false,
      auditSuccessForm:
        {
          content: ''
        }
      ,
      auditFailForm: {
        content: ''
      }
      ,
      auditSuccessVisible: false,
      auditFailVisible:
        false,
      border:
        true,
      resizable:
        false,
      biaoQianVisible:
        false,
      customNameCopy:
        false,
      pickerOptions:
        {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
          ,
        }
      ,
      commissionPresetClickData: [],
      presetData:
        [],
      businessList:
        [],
      dealForm:
        {
          commissionpriceType: '1',
          commissionprice:
            null,
          commissionpriceArr:
            null,
          businessIds:
            [],
          content:
            null,
        }
      ,
      dealVisible: false,
      cancellationVisible:
        false,
      recallVisible:
        false,
      authBackVisible:
        false,
      authBackFormRules:
        {
          content: [
            {required: true, message: '请输入理由', trigger: 'blur'},
          ],
        }
      ,
      authBackForm: {
        content: null,
      }
      ,
      cancellationForm: {
        cause: null,
        content:
          null,
      }
      ,
      activationFormInsideVisible: false,
      activationForm:
        {
          activationTime: null,
          identificationNumber:
            null,
          firstChargePrice:
            null,
          manageId:
            null
        }
      ,
      auditSuccessFormRules: {
        content: [{required: true, message: '内容必填', trigger: 'blur'}]
      },
      auditFailFormRules: {
        content: [{required: true, message: '内容必填', trigger: 'blur'}]
      },
      activationFormRules: {
        activationTime: [{required: true, message: '请选择激活日期', trigger: 'blur'}],
        identificationNumber:
          [{
            required: true,
            message: '请输入长度为16位的用户标识号',
            trigger: 'blur',
            min: 16,
            max: 16
          }],
        firstChargePrice:
          [{required: true, message: '请输入首充金额', trigger: 'blur'}],
      }
      ,
      activationFormInsideRules: {
        activationTime: [{required: true, message: '请选择激活日期', trigger: 'blur'}],
      }
      ,
      activationFormInside: {
        activationTime: null,
      }
      ,
      dynamicRules: {}
      ,
      type10Visible: false,
      type20Visible:
        false,
      type30Visible:
        false,
      type40Visible:
        false,
      defineLabelStatusData:
        [
          {key: '3', value: '处理中'},
          {key: '5', value: '已实名'},
          {key: '6', value: '已完成'}],

      logisticCompanyList:
        [
          {key: 'QITA', value: '【QITA】无需物流'},
        ],


      loserCauseData:
        [],
      cancellationCauseData:
        [],
      loserVisible:
        false,
      activationVisible:
        false,
      baoZhangFormInsideVisible:
        false,
      addGenJinVisible:
        false,
      type20Visible_douDian:
        false,
      baiMingDanVisible:
        false,
      heiMingDanVisible:
        false,
      weiXiDanVisible:
        false,
      baiMingDanOnlyRead:
        false,
      heiMingDanOnlyRead:
        false,

      weiXiDanOnlyRead:
        false,
      authFormRules:
        {
          content: [
            {required: true, message: '请输入理由', trigger: 'blur'},
          ],
        }
      ,
      baoZhangFormInsideRules: {
        baoZhangPrice: [{required: true, message: '请输入金额', trigger: 'blur'}],
      }
      ,
      baoZhangFormRules: {
        baoZhangPrice: [{required: true, message: '请输入金额', trigger: 'blur'}],
        content:
          [{required: true, message: '请输入理由', trigger: 'blur'}],
        manageId:
          [{required: true, message: '请选择提醒管理员', trigger: 'blur'}],
      }
      ,
      loserFormRules: {
        cause: [{required: true, message: '请选择失败原因', trigger: 'blur'}],
        content:
          [{required: true, message: '请输入理由', trigger: 'blur'}],
      }
      ,

      cancellationFormRules: {
        cause: [{required: true, message: '请选择废弃原因', trigger: 'blur'}],
        content:
          [{required: true, message: '请输入理由', trigger: 'blur'}],
      }
      ,

      labelPosition: 'left',
      orderFollowTimeList:
        [],
      haoMaGuiGeStr:
        '',
      form_userListGroupBy16:
        {
          doudianOrderManageAuthorId: null
        }
      ,
      from_telNumber: {
        telNumber: null,
      }
      ,
      form_receive: {
        receiveOrderUserId: null,
      }
      ,
      form: {
        supplierId: null,
      }
      ,
      maintainForm: {
        maintainReason: '',
      }
      ,
      recallForm: {
        content: '',
      }
      ,
      authForm: {
        content: '',
        manageId:
          '',
        channelId:
          null,
      }
      ,
      biaoQianForm: {
        labelType: '',
        labelNotes:
          '',
      }
      ,
      baoZhangForm: {
        baoZhangPrice: '',
        content:
          '',
        manageId:
          '',
      }
      ,
      loserForm: {
        cause: '',
        content:
          '',
      }
      ,
      heiMingDanVisibleFalse: false,
      previousLabelType:
        [],
      addGenJinForm: {
        goAudit: false,
        auditUser: null,
        emergentStatus: '1',
        type:
          '10',
        defineLabelNotes:
          '',
        defineLabelStatus:
          '',
        displayObjects:
          ['4'],
        defineLabel:
          '',
        manageId:
          '',
        orderprice:
          null,
        customName:
          null,
        customNumber:
          null,
        customTel:
          null,
        customAddress:
          null,
        customPackage:
          null,
        labelNotes:
          null,
        orderpriceNote:
          null,
        shengId:
          null,
        cityId:
          null,
        areaId:
          null,
        streetId:
          null,
        labelType:
          ['1'],
        note2Data:
          null,
        note3Data:
          null,
        note4Data:
          null,
        note5Data:
          null,
        logisticCompany:
          '',
        logisticSerial:
          '',
        logisticPhoneSuffix:
          '',
      }
      ,
      baoZhangFormInside: {
        baoZhangPrice: '',
      }
      ,
      supplierList: [],
      sysUserList:
        [],
      sysUserListByGroup16:
        [],
      orderDetail:
        {
          supplierId: null,
          settlementPrice:
            null,
          uploadFloorPrice:
            null,
          doudianOrderSpecList:
            []
        }
      ,
      maintainVisible: false,
      authVisible:
        false,
      baoZhangVisible:
        false,
      telNumberRules:
        {
          telNumber: [
            {
              validator: validateTelNumber, trigger: 'blur'
            }
          ]
        }
      ,
      biaoQianFormRules: {
        labelType: []
      }
      ,
    }
  },
  watch: {
    'addGenJinForm.defineLabel'(newVal) {
      if (newVal.toString().length > 6) {
        this.addGenJinForm.defineLabel = newVal.toString().slice(0, 6)
      }
    },

    'activationForm.identificationNumber'(newVal) {
      if (newVal && newVal.toString().length > 16) {
        this.activationForm.identificationNumber = newVal.toString().slice(0, 16);
      }
    },

    'dealForm.businessIds'(newValue, oldValue) {
      const removed = oldValue.filter(old => !newValue.includes(old));
      if (removed.length > 0) {
        this.commissionPresetClickData = this.commissionPresetClickData.filter(item => !removed.includes(item.businessId));
      }
    },
    'dealForm.commissionprice'(newValue) {
      if (newValue < 0) {
        this.$modal.msgError("输入金额不能小于0!")
        this.dealForm.commissionprice = '';
      }
    }
  },
  methods: {
    contentCheck(content) {
      const keywords = ["创建客诉工单", "分配专员处理", "关闭客诉工单", "完结客诉工单", "添加处理方案", "添加处理方案，等待审核"];
      return !keywords.some(keyword => content.includes(keyword));
    },
    ksOrderClose() {
      this.flashFile();
    },
    ksCloseOrderPremise() {
      this.ks.closeForm.content = null;
      this.ks.closeFormVisible = true;
      this.ks.stepsTitleList = this.ks.guanBi;
    },
    ksWanJieOrderPremise() {
      this.ks.wanJieForm.content = null;
      this.ks.wanJieFormVisible = true;
    },
    ksAddAuditPermise() {
      selectUsersByIds().then(res => {
        this.ks.auditUserIds = res.data;
      })
      this.ks.auditForm.content = null;
      this.ks.auditFormVisible = true;
    },
    ksAuditFormConfirm() {
      if (!this.ks.auditForm.content) {
        return this.$modal.msgError('审批消息必填!')
      }
      this.loading = true;
      ksAddAuditUserId({
        "auditUserId": this.ks.auditForm.auditUserId, "replyContent":
        this.ks.auditForm.content, "orderId": this.orderDetail.ksOrder.orderId,
        "ksId": this.orderDetail.ksOrder.id,
      }).then(res => {
        this.flushKsOrderLog()
      })
      this.ks.auditFormVisible = false;
      this.loading = false;
    },
    ksWanJieFormConfirm() {
      if (!this.ks.wanJieForm.content) {
        return this.$modal.msgError('完结消息必填!')
      }
      const formData = new FormData();
      formData.append("replyContent", this.ks.wanJieForm.content);

      if (this.ksOrder.orderId) {
        formData.append("orderId", this.ksOrder.orderId);
      }
      if (this.ksOrder.id) {
        formData.append("ksId", this.ksOrder.id);
      }
      formData.append("state", 5);

      this.loading = true;
      addKsOrderReplyLogAndUpload(formData).then(res => {
        this.flushKsOrderLog()
      })
      this.ks.wanJieFormVisible = false;
      this.loading = false;
    },

    ksCloseFormConfirm() {
      if (!this.ks.closeForm.content) {
        return this.$modal.msgError('关闭消息必填!')
      }
      const formData = new FormData();
      formData.append("replyContent", this.ks.closeForm.content);
      if (this.orderDetail.ksOrder.orderId) {
        formData.append("orderId", this.orderDetail.ksOrder.orderId);
      }
      if (this.orderDetail.ksOrder.id) {
        formData.append("ksId", this.orderDetail.ksOrder.id);
      }
      formData.append("state", 6);

      this.loading = true;
      addKsOrderReplyLogAndUpload(formData).then(res => {
        this.flushKsOrderLog()
      })
      this.ks.closeFormVisible = false;
      this.loading = false;
    },
    closeKsImageUploadPage() {
      this.ks.image.uploadFiles = [];
      this.ks.image.open = false;
    },
    closeKsAudioUploadPage() {
      this.ks.audio.uploadFiles = [];
      this.ks.audio.open = false;
    },
    ksFormClose() {
      this.ksOrderReplyForm.referenceVisible = false;
      this.ksOrderReplyForm.referenceContent = null;
      this.ksOrderReplyForm.referenceId = null;
    },
    preReferenceContent(item) {
      this.ksOrderReplyForm.referenceVisible = true;
      this.ksOrderReplyForm.referenceContent = item.replyContent;
      this.ksOrderReplyForm.replyNickName = item.nickName;
      this.ksOrderReplyForm.creteTime = item.createTime;
      this.ksOrderReplyForm.referenceId = item.id;
    },
    ksOrderReplyFormSubmit() {
      const formData = new FormData();
      this.ks.image.uploadFiles.forEach(file => {
        formData.append("files", file.raw);
      });
      this.ks.audio.uploadFiles.forEach(file => {
        formData.append("audioFiles", file.raw);
      });


      if (this.ksOrderReplyForm.replyContent) {
        formData.append("replyContent", this.ksOrderReplyForm.replyContent);
      } else {
        this.$modal.msgError('回复消息必填!')
        return
      }
      if (this.ksOrderReplyForm.referenceId) {
        formData.append("referenceId", this.ksOrderReplyForm.referenceId);
      }

      if (this.ksOrderReplyForm.referenceContent) {
        formData.append("referenceContent", this.ksOrderReplyForm.referenceContent);
      }
      if (this.orderDetail.ksOrder.orderId) {
        formData.append("orderId", this.orderDetail.ksOrder.orderId);
      }
      if (this.orderDetail.ksOrder.id) {
        formData.append("ksId", this.orderDetail.ksOrder.id);
      }

      this.loading = true;
      addKsOrderReplyLogAndUpload(formData).then(res => {
        this.ksOrderReplyForm.replyContent = null;
        this.flushKsOrderLog()
      })
      this.ks.image.open = false;
      this.loading = false;
    },
    flushKsOrderLog() {
      this.ks.image.uploadFiles = [];
      this.ks.audio.uploadFiles = [];
      this.ksFormClose();
      listKsOrderReplyLog({'ksId': this.ksOrder.id}).then(res => {
        this.ksOrderReplayLogs = res.rows;
        if (this.ksOrderReplayLogs.length > 0) {
          if (this.ksOrderReplayLogs[0].state) {
            this.ksOrder.state = this.ksOrderReplayLogs[0].state
            this.ks.active = this.ksOrder.state;
            if (this.ksOrder.state == 6) {
              this.ks.active = 3;
              this.ks.stepsTitleList = this.ks.guanBi;
            } else {
              this.ks.stepsTitleList = this.ks.zhengChang;
            }
          }
        } else {
          this.ks.stepsTitleList = this.ks.zhengChang;
          this.ks.active = 1;
          this.ksOrder.state = 1;
        }
        this.ksFormClose();
      })
    },
    goKsOrderDetail2() {
      this.$store.commit('SET_ksOrderDetailVisible');
      this.ksOrder = {...this.orderDetail.ksOrder};
      this.$store.commit('SET_KS_ORDER_ID', this.ksOrder);
    },
    goKsOrderDetail() {


      this.ksOrder = {...this.orderDetail.ksOrder};
      this.ksOrderDetailVisible = true;
      this.ksOrderReplyForm.referenceContent = null;
      this.ksOrderReplyForm.referenceVisible = false;
      this.audioKsAttachmentList = [];
      this.ksAttachmentImagesList = [];
      this.ksOrderReplyForm.replyContent = null;
      this.ks.image.uploadFiles = [];
      this.ks.audio.uploadFiles = [];
      this.loading = true;
      this.flushKsOrderLog();
      selectRxOrderBySerial(this.ksOrder.orderId).then(res => {
        this.ksOrder = {
          ...this.ksOrder,
          customName: res.data.customName,
          customNumber: res.data.customNumber,
          customAddress: res.data.shengId + res.data.cityId + res.data.areaId + res.data.streetId + res.data.realAddress,
          customTel: res.data.customTel,
          telNumber: res.data.telNumber,
          customNumberAge: res.data.customNumberAge,
          channelName: res.data.channelName,
          channelCode: res.data.channelCode,
          contactUser: res.data.contactUser,
        }
      })
      this.loading = false;
    },
    addKsOrderFormClose() {
      this.addKsOrderVisible = false;
      this.addKsOrderForm.source = null;
      this.addKsOrderForm.emergency = null;
      this.addKsOrderForm.ksType = null;
      this.addKsOrderForm.content = null;
    },

    async addKsOrderFormConfirm(formName) {
      try {
        if (!this.$refs[formName]) {
          throw new Error("表单引用不存在！");
        }
        let valid;
        try {
          valid = await this.$refs[formName].validate();

        } catch (validateErr) {
          return false;
        }
        if (!valid) {

          return false;
        }
        if (!this.orderDetail.id) {
          throw new Error("缺少订单id值");
        }
        const query = {
          orderId: this.orderDetail.id,
          ...this.addKsOrderForm,
        };

        this.loading = true;
        await addKsOrder(query);
        this.$modal.msgSuccess("添加客诉工单成功!");
        const [followRes, detailRes] = await Promise.all([
          getOrderFollowById({id: this.rowId}),
          getOrderFollowDetailById(this.rowId),
        ]);
        this.orderFollowTimeList = followRes.data;
        this.orderDetail = detailRes.data;
        this.addKsOrderVisible = false;
        this.loading = false;
      } catch (error) {

        this.$modal.msgError(`操作失败: ${error.message || "未知错误"}`);
      }
    },
    preAddKsOrder() {
      this.addKsOrderVisible = true;
      this.addKsOrderForm.source = null;
      this.addKsOrderForm.emergency = null;
      this.addKsOrderForm.ksType = null;
      this.addKsOrderForm.content = null;
    },
    flashFile() {
      getOrderFollowById({id: this.orderDetail.id}).then(res => {
        this.orderFollowTimeList = res.data;
      });
    },
    importAudio(item) {
      this.audioResUrls = [];
      this.audio.audioResUrls = [];
      this.orderId = null;
      this.followId = null;
      this.userId = null;
      this.orderId = this.orderDetail.id;
      this.followId = item.id;
      this.userId = this.$store.state.user.id
      this.audio.title = "上传录音";
      this.audio.open = true;
    },

    ksImportAudio() {
      this.ks.audio.uploadFiles = [];
      this.ks.audio.audioResUrls = [];
      this.ks.audio.open = true;
      this.orderId = this.orderDetail.id;
      this.userId = this.$store.state.user.id
    },

    importImages(item) {
      this.imageResUrls = [];
      this.image.uploadFiles = [];
      this.orderId = null;
      this.followId = null;
      this.userId = null;
      this.orderId = this.orderDetail.id;
      this.followId = item.id;
      this.userId = this.$store.state.user.id
      this.image.title = "上传图片";
      this.image.open = true;
    },

    importKsOrderImage() {
      this.ks.imageResUrls = [];
      this.ks.image.uploadFiles = [];
      this.orderId = null;
      this.userId = null;
      this.orderId = this.orderDetail.id;
      this.userId = this.$store.state.user.id
      this.ks.image.open = true;
    },

    audioExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    imageExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    audioBeforeUpload(file) {
      const isAudio = ['audio/mpeg', 'audio/wav', 'audio/mp4', 'audio/x-m4a'].includes(file.type);
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isAudio) {
        return this.$message.error('音频只能是mp3/wav/m4a 格式!');

      }
      if (!isLt5M) {
        return this.$message.error('音频大小不能超过 5MB!');
      }
      return isAudio && isLt5M;
    },

    imageBeforeUpload(file) {
      const isJPG = ['image/jpeg', 'image/png'].includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        return this.$message.error('图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        return this.$message.error('图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    submitAudioForm() {
      if (this.audio.uploadFiles.length === 0) {
        return this.$message.warning("请先选择文件");
      }
      if ((this.audio.uploadFiles.length + this.audioResUrls.length) > 3) {
        return this.$message.warning("你本次上传的总数大于3,请删除一些");
      }
      const formData = new FormData();
      this.audio.uploadFiles.forEach(file => {
        formData.append("files", file.raw);
      });
      formData.append("orderId", this.orderId);
      formData.append("followId", this.followId);
      formData.append("userId", this.userId);

      this.audio.isUploading = true;
      const progressMessage = this.$message({message: '文件上传中...', type: 'info', duration: 0, showClose: true});

      uploadOrderAudios(formData, {
        onUploadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);

          }
        }
      }).then(res => {
        if (res.code === 200) {
          this.$message.success("上传成功！");
          this.audio.uploadFiles = [];
          this.audio.open = false;
          this.audioResUrls = [...res.data.urls, ...this.audioResUrls];
          getOrderFollowById({id: this.orderId}).then(res => {
            this.orderFollowTimeList = res.data;
          });
        } else {
          this.$message.error(res.msg || "上传失败");
        }
      }).catch(error => {
        this.$message.error("请求失败: " + (error.message || "未知错误"));
      }).finally(() => {
        this.audio.isUploading = false;
        progressMessage.close();
      });
    },


    submitImageForm() {
      if (this.image.uploadFiles.length === 0) {
        this.$message.warning("请先选择文件");
        return;
      }
      if ((this.image.uploadFiles.length + this.imageResUrls.length) > 5) {
        this.$message.warning("你本次上传的总数大于5,请删除一些");
        return;
      }
      const formData = new FormData();
      this.image.uploadFiles.forEach(file => {
        formData.append("files", file.raw);
      });
      formData.append("orderId", this.orderId);
      formData.append("followId", this.followId);
      formData.append("userId", this.userId);

      this.image.isUploading = true;
      const progressMessage = this.$message({message: '文件上传中...', type: 'info', duration: 0, showClose: true});

      uploadOrderImages(formData, {
        onUploadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);

          }
        }
      }).then(res => {
        if (res.code === 200) {
          this.$message.success("上传成功！");
          this.image.uploadFiles = [];
          this.image.open = false;
          this.imageResUrls = [...res.data.urls, ...this.imageResUrls];
          getOrderFollowById({id: this.orderId}).then(res => {
            this.orderFollowTimeList = res.data;
          });
        } else {
          this.$message.error(res.msg || "上传失败");
        }
      }).catch(error => {
        this.$message.error("请求失败: " + (error.message || "未知错误"));
      }).finally(() => {
        this.image.isUploading = false;
        progressMessage.close();
      });
    },

    ksImageFileChange(file, fileList) {
      this.ks.image.uploadFiles = fileList;
    },

    submitKsAudioForm() {
      if (this.ks.audio.uploadFiles.length === 0) {
        this.$message.warning("请先选择文件");
        return;
      }
      if ((this.ks.audio.uploadFiles.length) > 3) {
        this.$message.warning("你本次上传的总数大于3,请删除一些");
        return;
      }
      this.$message.success("请输入跟进消息并点击发送!");
      this.ks.audio.open = false;
    },

    submitKsImageForm() {
      if (this.ks.image.uploadFiles.length === 0) {
        this.$message.warning("请先选择文件");
        return;
      }
      if ((this.ks.image.uploadFiles.length) > 5) {
        this.$message.warning("你本次上传的总数大于5,请删除一些");
        return;
      }
      this.$message.success("请输入跟进消息并点击发送!");
      this.ks.image.open = false;
    },
    audioFileChange(file, fileList) {
      this.audio.uploadFiles = fileList;
    },
    ksAudioFileChange(file, fileList) {
      this.ks.audio.uploadFiles = fileList;
    },
    imageFileChange(file, fileList) {
      this.image.uploadFiles = fileList;
    },

    deleteImage(image) {

      deleteAttachment({'id': image.id}).then(res => {
        this.$modal.msgSuccess("删除订单附件成功!")
        this.showAttachmentByImages(image.orderFollow);
        getOrderFollowById({id: image.orderId}).then(res => {
          this.orderFollowTimeList = res.data;
        });
      })
    },
    ksDeleteAttachment(item) {
      ksDeleteAttachment({'id': item.id}).then(res => {
        this.$modal.msgSuccess("删除订单附件成功!")
        listKsOrderReplyLog({'ksId': this.orderDetail.ksOrder.id}).then(res => {
          this.ksOrderReplayLogs = res.rows;
        })
        this.ksShowAttachmentImagesDiagLogVisible = false
        this.ksShowAttachmentAudioDiagLogVisible = false
      })
    },

    deleteAudio(audio) {

      deleteAttachment({'id': audio.id}).then(res => {
        this.$modal.msgSuccess("删除订单附件成功!")
        this.showAttachmentByAudio(audio.orderFollow);
        getOrderFollowById({id: audio.orderId}).then(res => {
          this.orderFollowTimeList = res.data;
        });
      })
    },
    showAttachmentByImages(followId) {
      getAttachmentImagesByFollowId({'followId': followId, 'fileType': '1'}).then(res => {
        this.attachmentImagesList = res.data;
        this.showAttachmentImagesDiagLogVisible = true;
      })
    },
    ksShowAttachmentByImages(ksAttachments) {
      getKsTempUrl(ksAttachments).then(res => {
        this.ksAttachmentImagesList = res.data;
        this.ksShowAttachmentImagesDiagLogVisible = true;
      })
    },
    ksShowAttachmentByAudio(ksAttachments) {
      getKsTempUrl(ksAttachments).then(res => {
        this.audioKsAttachmentList = res.data;
        this.ksShowAttachmentAudioDiagLogVisible = true;
      })
    },
    showAttachmentByAudio(followId) {
      getAttachmentImagesByFollowId({'followId': followId, 'fileType': '2'}).then(res => {
        this.audioList = res.data;
        this.showAttachmentAudioDiagLogVisible = true;
      })
    },
    generateQR(followId) {
      const refName = 'qrcodeCanvas_' + followId;
      const canvas = this.$refs[refName][0];
      let fullUrl = "http://hmk.haomaku.vip/public/qrcode-redirect" + "?orderId=" + this.orderDetail.id + "&followId=" + followId + "&userId=" + this.$store.state.user.id + '&serial=' + this.orderDetail.serial
      // let fullUrl = "http://192.168.0.106/public/qrcode-redirect" + "?orderId=" + this.orderDetail.id + "&followId=" + followId + "&userId=" + this.$store.state.user.id + '&serial=' + this.orderDetail.serial

      this.generateFinalQR(canvas, fullUrl);
    },
    generateFinalQR(canvas, fullUrl) {
      QRCode.toCanvas(canvas, fullUrl, {
        width: 200,  // 建议最小200px
        margin: 2,
        color: {
          dark: '#000000',
          light: '#ffffff'
        }
      });
    },
    preTakeOrder() {
      this.takeOrderVisible = true;
      this.takeOrderForm.content = null;
    },
    takeOrder(from) {

      if (!from.content) {
        this.$message({type: 'error', message: '揽收理由必填!'});
        return;
      }
      takeOrder({'id': this.orderDetail.id, 'content': from.content}).then(res => {
        getOrderDetailById(this.orderDetail.id).then(res => {
          this.orderDetail = res.data;
        })
        getOrderFollowById({id: this.orderDetail.id}).then(res => {
          this.orderFollowTimeList = res.data;
        })
        this.takeOrderVisible = false;
        this.$message({
          type: 'success',
          message: '揽单成功!'
        });

      })
    },
    channelLabelFormat(item) {
      return item.channelName + "/" + item.channelCode;
    },
    orderChannelSimpleList() {
      orderChannelSimpleList().then(res => {
        this.orderChannelList = res.data;
      })
    },
    telNumberChange(value) {
      this.telIsNullTag = value;
      this.form_telNumberVisible = true;
    },

    async formTelNumberVisibleConfirm() {
      this.$refs.from_telNumber.validate(valid => {
        if (valid) {
          const query = {
            telnumber: this.from_telNumber.telNumber,
            id: this.orderDetail.id
          }
          selectRxTelByTel(this.from_telNumber.telNumber).then(res => {
            if (res.data == null) {
              this.$confirm('上架号码中无此号,是否直接写入该订单号码?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {

                const queryData = {
                  'telnumber': this.from_telNumber.telNumber,
                  'id': this.orderDetail.id
                }
                updateOrderTelAndForce(queryData).then(res => {

                  getOrderDetailById(this.orderDetail.id).then(res => {
                    this.orderDetail = res.data;
                    this.$modal.msgSuccess("提交成功!")
                  })
                  getOrderFollowById({id: this.orderDetail.id}).then(res => {
                    this.orderFollowTimeList = res.data;
                  })
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });
              });

            } else {

              updateByTelNumber(query).then(res => {

                getOrderDetailById(this.orderDetail.id).then(res => {
                  this.orderDetail = res.data;
                  this.$modal.msgSuccess("提交成功!")
                })
                getOrderFollowById({id: this.orderDetail.id}).then(res => {
                  this.orderFollowTimeList = res.data;
                })
              }).catch(error => {
                console.log("修改电话号码报错", error)
              })
            }
          })
          this.form_telNumberVisible = false;
        }
      })
    },
    decryptUserInfo() {
      const {customNumber, customName, customTel, customAddress, doudianOrderStatus} = this.orderDetail;
      return (!customNumber || !customName || !customTel || !customAddress) && (doudianOrderStatus == 10 || doudianOrderStatus == 20)
    },

    async handDecrypt() {

      const query = {
        id: this.rowId,
      }
      handDecrypt(query).then(res => {
        this.$modal.msgSuccess('提交成功!');
      })
      this.flushOrderDetail();
      this.loserVisible = false;
    },
    auditSuccess() {
      this.auditSuccessForm.content = '';
      this.auditSuccessVisible = true;
    },
    auditFail() {
      this.auditFailForm.content = '';
      this.auditFailVisible = true;
    },

    hasRole(roleNames) {
      if (!this.$store.state.user.roles) return false;
      const requiredRoles = roleNames.split(',').map(role => role.trim());
      return requiredRoles.some(role => this.$store.state.user.roles.includes(role));
    },
    showCopyIcon(row) {
      this.$set(row, 'showCopy', true);
    },
    hideCopyIcon(row) {
      this.$set(row, 'showCopy', false);
    },
    copyText(text) {
      if (!text) {
        return;
      }

      const cleanedText = String(text)

        .replace(/(\d)\s+(\d)/g, '$1$2')

        .replace(/<br>/g, ' ')

        .replace(/\s+/g, ' ')
        .trim();

      const textarea = document.createElement('textarea');
      textarea.value = cleanedText;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      this.$message.success('复制成功：' + cleanedText);
    },
    async getIdentityVisible(row) {
      const query = {id: row.id};
      const res = await getIdentityVisible(query);
      this.orderDetail.customNumber = res.data.customNumber;
      this.$modal.msgSuccess("获取成功")
      const res2 = await getOrderFollowById({id: row.id});
      this.orderFollowTimeList = res2.data;
    },
    async getPhoneVisible(row) {
      const query = {id: row.id};
      const res = await getPhoneVisible(query);
      this.orderDetail.customTel = res.data.customTel;
      this.$modal.msgSuccess("获取成功")
      const res2 = await getOrderFollowById({id: row.id});
      this.orderFollowTimeList = res2.data;
    },

    async getSupplierNameVisible(row) {
      const query = {id: row.id};
      const res = await getSupplierNameVisible(query);
      this.orderDetail.supplierName = res.data.supplierName;
      this.$modal.msgSuccess("获取成功")
      const res2 = await getOrderFollowById({id: row.id});
      this.orderFollowTimeList = res2.data;
    },

    handleClose() {

      this.$store.commit('SET_orderFollowVisible_FALSE');
      this.$store.commit('SET_ORDER_DETAIL_FLUSH_TAG_TRUE');
    },
    handleOpen() {
      if (!this.rowId) {
        return;
      }
      const id = this.rowId || this.$route.query.id;
      if (!id) {
        return;
      }


      getOrderFollowDetailById(id).then(res => {
        this.orderDetail = res.data;

        this.haoMaGuiGe();
      });

      const query = {id: id};
      getOrderFollowById(query).then(res => {
        this.orderFollowTimeList = res.data;

      });
    },
    dealFromSelectChange() {

      const businessObjs = this.businessList.filter(bs => this.dealForm.businessIds.some(id => bs.id == id));

      const filteredBusinessIds = businessObjs.filter(businessId => !this.commissionPresetClickData.some(item => item.businessId == businessId.id));

      const suffixSelectData = [];
      if (filteredBusinessIds.length > 0) {
        for (const f in filteredBusinessIds) {
          const newO = {
            'userName': filteredBusinessIds[f].name,
            'businessId': filteredBusinessIds[f].id,
            'radio': '',
          }
          this.commissionPresetClickData.push(newO)
        }
      }

    },
    dealClose() {
      this.commissionPresetClickData = [];
      this.dealForm.businessIds = [];
      this.dealForm.content = null;
      this.dealForm.commissionprice = null;
      this.dealVisible = false;
    },
    commissionPresetClick(key) {
      this.commissionPresetClickData = [...this.presetData[key]];
      this.dealForm.businessIds = this.commissionPresetClickData.map(item => item.businessId);
    },
    myRadio(radio) {
      return " : " + radio + "%";
    },
    myBusiness(businessId) {
      return "【" + businessId + "】";
    },
    dealTypeChange() {

      if (this.dealForm.commissionpriceType == 2) {
        this.businessList = JSON.parse(sessionStorage.getItem("businessList"))
        selectAll().then(res => this.presetData = res.data);

      }
    },
    labelTypeChange(value, newV) {
      this.baiMingDanVisible = false;
      this.heiMingDanVisible = false;
      this.weiXiDanVisible = false;
      this.heiMingDanVisibleFalse = false;
      this.addGenJinForm.labelType.forEach(item => {
        if (item == 2) {
          this.baiMingDanVisible = true;
        } else if (item == 3) {
          this.heiMingDanVisible = true;
        } else if (item == 4) {
          this.weiXiDanVisible = true;
        }
      })
      if (this.previousLabelType.includes("3")) {
        if (!this.addGenJinForm.labelType.includes("3")) {
          this.heiMingDanVisibleFalse = true;
        }
      }

      this.previousLabelType = this.addGenJinForm.labelType;
    },
    initialRule() {

      this.dynamicRules = {};

      if (this.addGenJinForm.type == 10) {
        this.dynamicRules.defineLabelNotes = fullRules.defineLabelNotes;
      }
      if (this.addGenJinForm.type == 20) {
        if (this.orderDetail.type == 5 || this.orderDetail.type == 6) {
          this.dynamicRules.customName = fullRules.customName;
          this.dynamicRules.customNumber = fullRules.customNumber;
          this.dynamicRules.customTel = fullRules.customTel;
          this.dynamicRules.customAddress = fullRules.customAddress;
          this.dynamicRules.shengId = fullRules.shengId;
        } else {
          this.dynamicRules.customName = fullRules.customName;
          this.dynamicRules.customNumber = fullRules.customNumber;
          this.dynamicRules.customTel = fullRules.customTel;
          this.dynamicRules.customAddress = fullRules.customAddress;
          this.dynamicRules.customPackage = fullRules.customPackage;
          this.dynamicRules.orderprice = fullRules.orderprice;
        }
      }
      if (this.addGenJinForm.type == 30) {
      }
      if (this.addGenJinForm.type == 40) {
      }
    },

    addGenJinClose() {
      this.addGenJinForm.type = '10'
      this.addGenJinVisible = false;
      if (null != this.orderDetail.labelTyp) {
        this.addGenJinForm.labelType = this.orderDetail.labelType.split(',');
      }

      this.previousLabelType = this.addGenJinForm.labelType;
      this.heiMingDanVisibleFalse = false;
      this.heiMingDanVisible = false;
      this.addGenJinForm.defineLabelNotes = '';
      this.addGenJinForm.emergentStatus = '1'
    },

    addGenJinTypeChange() {
      if (this.addGenJinForm.type == 10) {
        this.addGenJinForm.defineLabelNotes = '';
        this.addGenJinForm.defineLabel = '';
        this.addGenJinForm.defineLabelNotes = this.orderDetail.defineLabelNotes;
        this.addGenJinForm.defineLabel = this.orderDetail.defineLabel;
        this.type10Visible = true;
        this.type20Visible = false;
        this.type30Visible = false;
        this.type40Visible = false;
        this.type20Visible_douDian = false;
      } else if (this.addGenJinForm.type == 20) {
        if (this.orderDetail.type == 5 || this.orderDetail.type == 6) {
          this.addGenJinForm.customName = this.orderDetail.customName;
          this.addGenJinForm.customNumber = this.orderDetail.customNumber;
          this.addGenJinForm.customTel = this.orderDetail.customTel;
          this.addGenJinForm.customAddress = this.orderDetail.customAddress;
          this.addGenJinForm.shengId = this.orderDetail.shengId;
          this.addGenJinForm.cityId = this.orderDetail.cityId;
          this.addGenJinForm.areaId = this.orderDetail.areaId;
          this.addGenJinForm.streetId = this.orderDetail.streetId;
          this.addGenJinForm.realaddress = this.orderDetail.realaddress;
          this.type20Visible_douDian = true;
          this.type10Visible = false;
          this.type20Visible = false;
          this.type30Visible = false;
          this.type40Visible = false;
        } else {
          this.addGenJinForm.customName = this.orderDetail.customName;
          this.addGenJinForm.customNumber = this.orderDetail.customNumber;
          this.addGenJinForm.customTel = this.orderDetail.customTel;
          this.addGenJinForm.customAddress = this.orderDetail.customAddress;
          this.addGenJinForm.customPackage = this.orderDetail.customPackage;
          this.addGenJinForm.orderprice = this.orderDetail.orderPrice;
          this.addGenJinForm.orderpriceNote = this.orderDetail.orderpriceNote;
          this.addGenJinForm.labelNotes = this.orderDetail.labelNotes;
          this.type20Visible = true;
          this.type10Visible = false;
          this.type30Visible = false;
          this.type40Visible = false;
          this.type20Visible_douDian = false;
        }
      } else if (this.addGenJinForm.type == 30) {
        this.addGenJinForm.logisticCompany = '';
        this.addGenJinForm.logisticSerial = '';
        this.addGenJinForm.logisticPhoneSuffix = '';
        this.type20Visible = false;
        this.type10Visible = false;
        this.type40Visible = false;
        this.type20Visible_douDian = false;
        this.type30Visible = true;
      } else if (this.addGenJinForm.type == 40) {
        this.addGenJinForm.note1Data = null;
        this.addGenJinForm.note2Data = null;
        this.addGenJinForm.note3Data = null;
        this.addGenJinForm.note4Data = null;
        this.addGenJinForm.note5Data = null;
        this.weiXiDanOnlyRead = false;
        this.heiMingDanOnlyRead = false;
        this.baiMingDanOnlyRead = false;
        this.baiMingDanVisible = false;
        this.heiMingDanVisible = false;
        this.weiXiDanVisible = false;
        this.heiMingDanVisibleFalse = false;
        this.addGenJinForm.labelType = [];
        this.addGenJinForm.defineLabelStatus = '';
        this.addGenJinForm.defineLabel = '';

        if (null == this.orderDetail.labelType) {
          this.weiXiDanOnlyRead = false;
          this.baiMingDanOnlyRead = false;
        }
        if (null != this.orderDetail.labelType) {
          this.addGenJinForm.labelType = this.orderDetail.labelType.split(',');

          this.previousLabelType = this.addGenJinForm.labelType;

          if (this.orderDetail.labelNoteList) {
            this.orderDetail.labelNoteList.forEach(item => {
              if (item.type == 1) {
                this.addGenJinForm.note1Data = item.notes;
              } else if (item.type == 2) {
                this.addGenJinForm.note2Data = item.notes;
                if (item.notes) {
                  this.baiMingDanOnlyRead = true;
                  this.baiMingDanVisible = true;
                }
              } else if (item.type == 3) {
                this.addGenJinForm.note3Data = item.notes;
                this.heiMingDanOnlyRead = true;
                if (item.notes) {
                  this.heiMingDanVisible = true;
                }
              } else if (item.type == 4) {
                this.addGenJinForm.note4Data = item.notes;
                if (item.notes) {
                  this.weiXiDanOnlyRead = true;
                  this.weiXiDanVisible = true;
                }
              }
            })
          } else {
            console.log("this.orderDetail.labelNoteList 等于空")
          }
        }
        this.type40Visible = true;
        this.type20Visible = false;
        this.type30Visible = false;
        this.type10Visible = false;
        this.type20Visible_douDian = false;
      }
      this.initialRule();
    },


    enterSubmit,
    baoZhangClick() {
      this.sysUserList = JSON.parse(sessionStorage.getItem('sysUserList'));
      this.baoZhangForm.baoZhangPrice = null;
      this.baoZhangForm.content = null;
      this.baoZhangForm.manageId = null;
      this.baoZhangVisible = true;
    },

    loserClick() {
      this.sysUserList = JSON.parse(sessionStorage.getItem('sysUserList'));

      getLoserCauseData().then(res => {
        this.loserCauseData = res.data;
      })
      this.loserForm.cause = null;
      this.loserForm.content = null;
      this.loserVisible = true;
    },

    cancellationClick() {

      getCancellationCauseData().then(res => {
        this.cancellationCauseData = res.data;
      })
      this.cancellationVisible = true;
    },

    activationClick() {
      this.sysUserList = JSON.parse(sessionStorage.getItem('sysUserList'));
      this.activationForm.identificationNumber = null;
      this.activationForm.firstChargePrice = null;
      this.activationForm.manageId = null;
      this.activationForm.activationTime = null;
      this.activationVisible = true;
    },

    authBackClick() {
      this.authBackVisible = true;
    },

    addGenJinClick() {
      this.addGenJinForm.goAudit = false;
      this.addGenJinForm.auditUser = '';
      this.addGenJinForm.defineLabel = '';
      this.addGenJinForm.defineLabelStatus = '';
      this.sysUserList = JSON.parse(sessionStorage.getItem('sysUserList'));
      if (this.orderDetail.defineLabel) {
        this.addGenJinForm.defineLabel = this.orderDetail.defineLabel;
      }
      if (this.orderDetail.defineLabelStatus) {
        this.addGenJinForm.defineLabelStatus = this.orderDetail.defineLabelStatus;
      }
      this.addGenJinVisible = true;
      this.type10Visible = true;
      this.type20Visible = false;
      this.type30Visible = false;
      this.type40Visible = false;
      this.type20Visible_douDian = false;
      this.addGenJinForm.type = '10'
      this.addGenJinForm.defineLabelNotes = '';
      this.addGenJinForm.emergentStatus = '1';
      this.addGenJinForm.displayObjects = ['4'];
      this.initialRule();
    },

    maintainManageName() {
      return this.orderDetail.maintainManageName + "维系";
    },
    filterFollowType,

    maintainManageClick() {
      this.maintainForm.maintainReason = null;
      this.maintainVisible = true
    },

    authClick() {
      this.sysUserList = JSON.parse(sessionStorage.getItem('sysUserList'));
      this.orderChannelSimpleList();
      this.authForm.content = null;
      this.authForm.manageId = null;
      this.authForm.channelId = null;
      this.authVisible = true
    },

    genBiaoQianClick() {
      this.biaoQianVisible = true
    },
    filterContent(content) {
      return content + ',' + this.orderDetail.maintainReason;
    },
    filterGroupName(roleName) {
      if (roleName) {
        return roleName + " - ";
      } else {
        return " - ";
      }
    },


    async authBackFormConfirm(formName) {
      const valid = await this.$refs[formName].validate();
      if (!valid) {
        return false;
      }
      const query = {
        id: this.rowId,
        content: this.authBackForm.content
      }
      await editOrderAuthBack(query);
      this.$modal.msgSuccess('回退实名成功!');
      const [followRes, detailRes] = await Promise.all(
        [getOrderFollowById({id: this.rowId}),
          getOrderFollowDetailById(this.rowId)]
      )

      this.orderFollowTimeList = followRes.data

      this.orderDetail = detailRes.data
      this.authBackVisible = false;
    },

    async addGenJinFormConfirm(formName) {
      try {

        const valid = await this.$refs[formName].validate();
        if (!valid) {
          return false;
        }

        if (this.addGenJinForm.type == 10) {

          if ('' != this.addGenJinForm.defineLabel && this.addGenJinForm.defineLabelStatus == '') {
            this.$modal.msgError('请选择定义标签失效节点!');
            return;
          }

          if ('' == this.addGenJinForm.defineLabel && this.addGenJinForm.defineLabelStatus != '') {
            this.$modal.msgError('定义标签必须有值');
            return;
          }

          const query = {
            id: this.rowId,
            ...this.addGenJinForm,
          };
          query.labelType = null;

          await editOrderAddGenJin10(query);
          this.$modal.msgSuccess('提交成功!');

          const followRes = await getOrderFollowById({id: this.rowId});
          this.orderFollowTimeList = followRes.data;

          const orderData = await getOrderFollowDetailById(this.rowId);
          this.orderDetail = orderData.data;

          this.addGenJinVisible = false;
          return;
        }


        if (this.addGenJinForm.type == 20 && (this.orderDetail.type == 5 || this.orderDetail.type == 6)) {
          if (!this.addGenJinForm.cityId) {
            this.$modal.msgError("市必填")
            return;
          }
          if (!this.addGenJinForm.areaId) {
            this.$modal.msgError("区必填")
            return;
          }
          if (!this.addGenJinForm.streetId) {
            this.$modal.msgError("街道必填")
            return;
          }

          const query = {
            id: this.rowId,
            ...this.addGenJinForm,
          };
          query.labelType = null;

          await editOrderAddGenJin20(query);
          this.$modal.msgSuccess('提交成功!');

          const followRes = await getOrderFollowById({id: this.rowId});
          this.orderFollowTimeList = followRes.data;

          const orderData = await getOrderFollowDetailById(this.rowId);
          this.orderDetail = orderData.data;

          this.addGenJinVisible = false;
          return;
        }


        if (this.addGenJinForm.type == 20) {
          const query = {
            id: this.rowId,
            ...this.addGenJinForm,
          };
          query.labelType = null;

          await editOrderAddGenJin20(query);
          this.$modal.msgSuccess('提交成功!');

          const followRes = await getOrderFollowById({id: this.rowId});
          this.orderFollowTimeList = followRes.data;

          const orderData = await getOrderFollowDetailById(this.rowId);
          this.orderDetail = orderData.data;

          this.addGenJinVisible = false;
          return;
        }

        if (this.addGenJinForm.type == 30) {
          if (!this.addGenJinForm.logisticCompany) {
            this.$modal.msgError("快递公司必选")
            return;
          }

          const query = {
            id: this.rowId,
            logisticCompany: this.addGenJinForm.logisticCompany,
            logisticSerial: this.addGenJinForm.logisticSerial,
            logisticPhoneSuffix: this.addGenJinForm.logisticPhoneSuffix,
          }

          await editOrderAddGenJin30(query);
          this.$modal.msgSuccess('提交成功!');

          const followRes = await getOrderFollowById({id: this.rowId});
          this.orderFollowTimeList = followRes.data;

          const orderData = await getOrderFollowDetailById(this.rowId);
          this.orderDetail = orderData.data;

          this.addGenJinVisible = false;
          return;
        }


        if (this.addGenJinForm.type == 40) {
          if (this.addGenJinForm.labelType.includes("2")) {
            if (!this.addGenJinForm.note2Data) {
              this.$modal.msgError("白名单对应的备注请填写")
              return;
            }
          }

          if (this.addGenJinForm.labelType.includes("3")) {
            if (!this.addGenJinForm.note3Data) {
              this.$modal.msgError("黑名单对应的备注请填写")
              return;
            }
          }

          if (this.addGenJinForm.labelType.includes("4")) {
            if (!this.addGenJinForm.note4Data) {
              this.$modal.msgError("维系单对应的备注请填写")
              return;
            }
          }


          const query = {
            id: this.rowId,
            ...this.addGenJinForm,
          };
          query.labelType = null;


          await editOrderAddGenJin40(query);
          this.$modal.msgSuccess('提交成功!');
          const followRes = await getOrderFollowById({id: this.rowId});
          this.orderFollowTimeList = followRes.data;

          const orderData = await getOrderFollowDetailById(this.rowId);
          this.orderDetail = orderData.data;


          this.addGenJinVisible = false;
        }

      } catch (error) {

        this.$modal.msgError('提交失败，请重试！');
      }
    },


    async loserConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          if (this.orderDetail.baoZhangPrice > 0) {
            this.$modal.msgError("该笔订单有报账金额，请先操作退费!");
            return;
          }
          const query = {
            id: this.rowId,
            defineLabel: this.loserForm.cause,
            defineLabelNotes: this.loserForm.content,
          }
          editOrderLoser(query).then(res => {
            this.$modal.msgSuccess('提交成功!');
          })
          this.flushOrderDetail();
          this.loserVisible = false;
        } else {
          return false;
        }
      });
    },


    async auditSuccessFormConfirm(formName) {
      try {
        const valid = await this.$refs[formName].validate();
        if (!valid) {
          return;
        }
        const query = {
          id: this.rowId,
          content: this.auditSuccessForm.content,
        }
        await auditSuccess(query);
        this.flushOrderDetail();
        this.$modal.msgSuccess('审核成功-提交成功!');
        this.auditSuccessVisible = false;
      } catch (error) {

        return false;
      }
    },

    async auditFailFormConfirm(formName) {
      try {
        const valid = await this.$refs[formName].validate();
        if (!valid) {
          return;
        }
        const query = {
          id: this.rowId,
          content: this.auditFailForm.content,
        }
        await auditFail(query);
        this.flushOrderDetail();
        this.$modal.msgSuccess('审核失败-提交成功!');
        this.auditFailVisible = false;
      } catch (error) {
        return false;
      }
    },


    async authFormConfirm(formName) {
      try {
        const valid = await this.$refs[formName].validate();
        if (!valid) {
          return;
        }
        if (!this.authForm.channelId) {
          return this.$modal.msgError("请先选择渠道!");
        }
        const query = {
          id: this.rowId,
          content: this.authForm.content,
          channelId: this.authForm.channelId,
        }
        await editOrderState5(query);
        this.flushOrderDetail();
        this.authVisible = false;
      } catch (error) {

        return false;
      }
    },


    baoZhangConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          this.baoZhangFormInsideVisible = true;
        } else {

          return false;
        }
      });
    },


    async cancellationFormConfirm(formName) {
      try {
        const valid = await this.$refs[formName].validate();
        if (!valid) {

          return false;
        }
        const query = {
          id: this.rowId,
          cause: this.cancellationForm.cause,
          content: this.cancellationForm.content,
        }
        await editOrderByCancellation(query);
        this.$modal.msgSuccess('提交成功!');
        const [follow, detail] = await Promise.all([getOrderFollowById({'id': this.rowId}), getOrderFollowDetailById(this.rowId)]);
        this.cancellationVisible = false;
        this.orderFollowTimeList = follow.data;
        this.orderDetail = detail.data;
      } catch (error) {

      }
    },


    async dealFormConfirm(formName) {
      if (this.dealForm.commissionpriceType == 1) {

        if (!this.dealForm.commissionprice) {
          this.$modal.msgError("给佣金额必填")
          return;
        }
        const query = {
          id: this.rowId,
          commissionprice: this.dealForm.commissionprice,
          content: this.dealForm.content,
          commissionpriceType: this.dealForm.commissionpriceType
        }
        await editOrderByDeal(query);
        this.$modal.msgSuccess('提交成功!');
        const [follow, detail] = await Promise.all([getOrderFollowById({'id': this.rowId}), getOrderFollowDetailById(this.rowId)]);
        this.dealClose();
        this.orderFollowTimeList = follow.data;
        this.orderDetail = detail.data;
      } else if (this.dealForm.commissionpriceType == 2) {

        const query = {
          id: this.rowId,
          commissionpriceType: this.dealForm.commissionpriceType,
          commissionVos: this.commissionPresetClickData,
          content: this.dealForm.content,
        }
        let countRadio = 0;
        for (const c of this.commissionPresetClickData) {
          if (!c.radio) {

            this.$modal.msgError('提交的数据比例值全部是必填!', c);
            return
          }
          c.radio = Number.parseInt(c.radio, 10)
          countRadio = countRadio + Number.parseInt(c.radio);
        }
        if (countRadio > 60) {
          this.$modal.msgError('提交的数据比例值总值不能大于60!');

          return
        }

        await editOrderByDeal(query);
        this.$modal.msgSuccess('提交成功!');
        const [follow, detail] = await Promise.all([getOrderFollowById({'id': this.rowId}), getOrderFollowDetailById(this.rowId)]);
        this.dealClose();
        this.orderFollowTimeList = follow.data;
        this.orderDetail = detail.data;
      }
    },


    async baoZhangFormInsideConfirm(formName) {
      try {
        const valid = await this.$refs[formName].validate();
        if (!valid) {
          return;
        }
        if (this.baoZhangForm.baoZhangPrice != this.baoZhangFormInside.baoZhangPrice) {
          this.$modal.alertError("两次输入的价格不一致不能提交!");
          return;
        }
        const query = {
          id: this.rowId,
          baozhangPrice: this.baoZhangForm.baoZhangPrice,
          content: this.baoZhangForm.content,
          manageId: this.baoZhangForm.manageId,
        }
        await editOrderBaoZhang(query);
        this.flushOrderDetail();
        this.$modal.msgSuccess('报账成功!');
        this.baoZhangVisible = false;
        this.baoZhangFormInsideVisible = false;
      } catch (error) {

        return false;
      }
    },
    async flushOrderDetail() {
      const [followRes, detailRes] = await Promise.all(
        [getOrderFollowById({id: this.rowId}),
          getOrderFollowDetailById(this.rowId)]
      )
      this.$modal.msgSuccess("修改成功!")

      this.orderFollowTimeList = followRes.data

      this.orderDetail = detailRes.data
    },


    async maintainFormConfirm() {
      if (this.maintainForm.maintainReason) {
        const query = {
          id: this.rowId,
          maintainReason: this.maintainForm.maintainReason
        }
        await editByIdAndCurrent(query);
        this.flushOrderDetail();
        this.$modal.msgSuccess("修改成功!")
        this.maintainVisible = false;
      } else {
        this.$modal.msgError("输入无内容")
        return;
      }
    }
    ,

    async recallFormConfirm() {
      if (this.recallForm.content) {
        const query = {
          id: this.rowId,
          content: this.recallForm.content
        }
        const recallResponse = await editOrderByRecall(query);
        const [followRes, detailRes] = await Promise.all(
          [getOrderFollowById({id: this.rowId}),
            getOrderFollowDetailById(this.rowId)]
        )
        this.$modal.msgSuccess("修改成功!")
        this.orderFollowTimeList = followRes.data
        this.orderDetail = detailRes.data
        this.recallVisible = false;
      } else {
        this.$modal.msgError("输入无内容")
        return;
      }
    }
    ,
    haoMaGuiGe() {
      this.haoMaGuiGeStr = '';
      if (this.orderDetail.doudianOrderSpecList && this.orderDetail.doudianOrderSpecList.length > 0) {
        this.orderDetail.doudianOrderSpecList.forEach(item => {
          this.haoMaGuiGeStr = this.haoMaGuiGeStr + item.name + " : " + item.value + "\n"
        })
      }
    }
    ,
    truncateText(text) {
      return text.length > 20 ? text.substring(0, 20) + '...' : text;
    }
    ,

    formatTime(row) {
      return moment(row * 1000).format('YYYY年MM月DD日 HH:mm:ss');
    }
    ,
    formatFollowTimeTitle(roleName) {
      roleName = roleName || '';
      return "【" + roleName + "】";
    },
    formatTimeDifference(timestamp) {
      const currentTimestamp = Math.floor(Date.now() / 1000);

      const differenceInSeconds = currentTimestamp - timestamp;

      if (differenceInSeconds < 0) {
        return "时间还未到";
      }

      const minutes = Math.floor(differenceInSeconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);

      if (days > 0) {

        const remainingHours = hours % 24;
        const remainingMinutes = minutes % 60;
        return `${days}天${remainingHours}小时${remainingMinutes}分钟前`;
      } else if (hours > 0) {

        const remainingMinutes = minutes % 60;
        return `${hours}小时${remainingMinutes}分钟前`;
      } else {

        return `${minutes}分钟前`;
      }
    }
    ,

    activationConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const identificationStr = this.activationForm.identificationNumber.slice(2, 8);
          const formatDateStr = moment(this.activationForm.activationTime).format("YYYYMMDD");
          const dateStr = formatDateStr.slice(2, formatDateStr.length);
          if (identificationStr == dateStr) {
            this.activationFormInsideVisible = true;
            return;
          }
          if (identificationStr != dateStr) {
            this.$confirm('用户标识号和选择的日期不匹配,请检查是否无误?', '提示', {
              confirmButtonText: '已检查,确认无误!',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {


              this.activationFormInsideVisible = true;
            }).catch(() => {
              return;
            });
          }
        } else {

          return false;
        }
      });
    }
    ,

    activationFormInsideConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formatDateStr = moment(this.activationForm.activationTime).format("YYYYMMDD");
          if (formatDateStr != this.activationFormInside.activationTime) {
            this.$modal.alertError("两次输入的日期不一致不能提交!");
            return;
          }

          const query = {
            id: this.rowId,
            activationTime: this.activationFormInside.activationTime,
            identificationNumber: this.activationForm.identificationNumber,
            firstChargePrice: this.activationForm.firstChargePrice,
            manageId: this.activationForm.manageId,
          }

          editOrderActivation(query).then(res => {
            this.$modal.msgSuccess('打标激活成功!');

            getOrderFollowById({id: this.rowId}).then(res => this.orderFollowTimeList = res.data)

            getOrderFollowDetailById(this.rowId).then(res => this.orderDetail = res.data)
          })
          this.activationVisible = false;
          this.activationFormInsideVisible = false;
        } else {

          return false;
        }
      });
    }
    ,
  }
}


</script>

<style scoped lang="scss">

.hjfBottomFoot {
  display: flex;
  justify-content: end;
}

.preset-container {
  display: flex;
  gap: 46px; /* 设置组之间的间距 */
}

.preset-group {
  border: 1px solid #ddd; /* 边框 */
  border-radius: 4px; /* 圆角 */
  overflow: hidden; /* 防止内容溢出 */
  flex: 1; /* 让每个组平分宽度 */
  cursor: pointer;
}

.preset-header {
  background-color: #409eff; /* 蓝色背景 */
  color: white; /* 文字颜色 */
  padding: 8px 16px; /* 内边距 */
  font-weight: bold; /* 加粗 */
}

.preset-content {
  padding: 8px; /* 内边距 */
}

.preset-item {
  padding: 4px;
  border-bottom: 1px solid #eee; /* 分隔线 */
}

.preset-item:last-child {
  border-bottom: none; /* 最后一个项不需要分隔线 */
}


/* 默认隐藏（双重保障） */
.copy-cell .copy-icon {
  display: none !important;
  cursor: pointer;
}


/* 悬停时显示 */
.copy-cell:hover .copy-icon {
  display: inline-block !important;
}


/* 其他图标不受影响 */
.other-icon {
  margin-left: 10px;
  color: #409EFF;
  cursor: pointer;
}


/* 固定高度对话框(没用后期可以删除)   custom-class="fixed-height-dialog" */
.fixed-height-dialog {
  /* 固定高度（示例：80vh，根据需求调整） */
  height: 80vh;
  /* 强制居中（覆盖 Element UI 默认的 top 定位） */
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;

  /* 内部弹性布局，确保头部和底部固定 */
  display: flex;
  flex-direction: column;

  /* 对话框内容区域滚动 */
  .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
}

/* 内容容器滚动（备用方案） */
.dialog-content-container {
  max-height: calc(80vh - 300px); /* 减去标题和按钮高度 */
  overflow-y: auto;
}

/* 复制图标绝对定位（避免影响布局） */
.copy-cell {
  position: relative;
  height: 100%;
  padding-right: 25px; /* 预留图标空间 */
}

.copy-icon {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: none; /* 默认隐藏 */
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.myTitle {
  color: #c8c8c9;
  margin-top: 6px;
}

.timestamp-extra {
  margin-left: 10px;
}

.gray-bg {
  background-color: #f0f0f0; /* 灰色背景 */
}

//.dialog-content-container {
//  max-height: calc(80vh - 270px); /* 减去标题和按钮高度 */
//  overflow-y: auto;
//}

</style>
